tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

displace sesame

Browse Source
This commit is contained in:
Tykayn 2023-07-03 16:17:42 +02:00 committed by tykayn
parent fbcf46bbb8
commit 432f20783f
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/sprint_4.css
View File

@ -14424,8 +14424,12 @@ responsive land
@media all and (min-width: 1300px){ @media all and (min-width: 1300px){
#hand{
top: 15vh;
}
#main_title{ #main_title{
top: 10vh; top: 10vh;
min-height: 35vw;
max-width: 1300px; max-width: 1300px;
max-height: 500px; max-height: 500px;
} }

39
js/animations_custom.js
View File

@ -12,11 +12,14 @@ enable_animations = true
const rotateYCard = '200deg' const rotateYCard = '200deg'
const offsetCard = '10' const offsetCard = '10'
let innerWidth = window.innerWidth; let innerWidth = window.innerWidth
document.onresize(event=> { if (document.onresize) {
innerWidth = window.innerWidth;
console.log('innerWidth', innerWidth) document.onresize(event => {
}) innerWidth = window.innerWidth
console.log('innerWidth', innerWidth)
})
}
function animateCard (id, side) { function animateCard (id, side) {
@ -38,8 +41,8 @@ function animateCard (id, side) {
markers: development_debug, markers: development_debug,
} }
} }
fromObject[side] = 1; fromObject[side] = 1
toObject[side] = offsetCard; toObject[side] = offsetCard
gsap.fromTo('#content-' + id, fromObject, gsap.fromTo('#content-' + id, fromObject,
toObject) toObject)
@ -50,13 +53,13 @@ if (enable_animations) {
gsap.fromTo('#for_all_your', { gsap.fromTo('#for_all_your', {
opacity: 0, opacity: 0,
top: 100, top: 100,
scale:0.5, scale: 0.5,
}, },
{ {
opacity: 1, opacity: 1,
top:0, top: 0,
scale:1, scale: 1,
duration: 0.25, duration: 0.25,
scrollTrigger: { scrollTrigger: {
trigger: '#for_all_your', trigger: '#for_all_your',
@ -65,12 +68,12 @@ if (enable_animations) {
}) })
gsap.fromTo('#for_all_your_2', { gsap.fromTo('#for_all_your_2', {
opacity: 0, opacity: 0,
scale:0.5, scale: 0.5,
}, },
{ {
opacity: 1, opacity: 1,
duration: 1, duration: 1,
scale:1, scale: 1,
scrollTrigger: { scrollTrigger: {
trigger: '#for_all_your_2', trigger: '#for_all_your_2',
delay: 0.4, delay: 0.4,
@ -86,13 +89,11 @@ if (enable_animations) {
scrollTrigger: { scrollTrigger: {
trigger: '#unlock_white', trigger: '#unlock_white',
delay: 1, delay: 1,
scrub:2, scrub: 2,
start: '+50% 80%' start: '+50% 80%'
} }
}) })
gsap.to('#main_title', { gsap.to('#main_title', {
delay: 1, delay: 1,
// xPercent: ()=>nav.offsetHeight, // xPercent: ()=>nav.offsetHeight,
@ -101,8 +102,8 @@ if (enable_animations) {
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
}, },
top: innerWidth > 1300 ? '15vw' : '30vw', top: innerWidth > 1300 ? '15vw' : '30vw',
width: '-40vw', width: '-40vw',
}) })
@ -219,7 +220,7 @@ if (enable_animations) {
gsap.fromTo('#content_all_img', gsap.fromTo('#content_all_img',
{ {
scale: 1, scale: 1,
left: "-100" left: '-100'
}, },
{ {
scale: 1.1, scale: 1.1,