steelemediasolutions

I think I have it solved. I updated some of the values from '0' to 0.1vw. That seemed to fix it. It didnt seem to like a flat 0, it wanted units. and in some cases, I tried just 0vw, and it didnt like that either. I was placing my items where I wanted them with absolute positioning, then animating with a from tween - from 'something' to 0, and that was causing some issues. I am updating all of my values now, and the from tween values seem to be taking effect. Also, I tried to get rid of each functions scrollTrigger in favor of a master scrollTrigger, but I needed to pin one section, so I reversed it, and called each function with its own independent scrollTrigger. It all seems to be working well. Thank you for the back-and-forth. It helped as I was troubleshooting. Now to make it all responsive!

I will keep testing. Still having issues.

I will try to fix the nested scroll trigger issues. I tried calling the functions by themselves, but that doesnt fix the issue - the from values are still not being set until the scrollTrigger reaches the trigger for that function.

But in the master timline, that .set doesnt get called until it reaches your function. What I need to happen is that set to happen when the master timeline starts, before it reaches the start of that function/nested timeline. I will try to put together a demo. in the meantime, I will post my gsap code. any of the from() tweens in the nested functions dont get called until the master timeline reaches that function. const master = gsap.timeline({ scrollTrigger: { trigger: '#mainAnimation', start: 'top top', end: 'bottom bottom-=300', scrub: true, // markers: true, }, ease: 'power1', }) master .add(chainTimeline()) .add(textOneTimeline()) .add(shirtTimeline()) .add(bikeTimeline()) .add(shrimpTimeline()) .add(textTwoTimeline()) and here are the nested timelines. // Animation scripting import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; gsap.registerPlugin(ScrollTrigger); export function chainTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#chain-section', start: 'top top', end: 'bottom bottom-=300', pin: true, scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl // Chain Intro .from('#text-1', { opacity: '0', scale: '100', }, 'chain') .to('#chainFull', { visibility: 'hidden', },) .from('#chainTop', { visibility: 'hidden', }, 'chain') .from('#chainBottom', { visibility: 'hidden', }, 'chain') .to('#chainTop', { x: '25vw', y: '-25vw', }, 'chainMove-=0.5') .to('#chainBottom', { x: '-25vw', y: '25vw', }, 'chainMove-=0.5'); return tl; } export function textOneTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#textOneSection', start: 'top bottom-=300', end: 'top top+=200', scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl // Hand 1 .from('#hand-1', { x: '60rem', }, '-=0.4') .from('#text-2', { x: '60rem', }, '<') .to('#hand-1', { x: '60rem', }) // Hand 2 .fromTo('#hand-2', { right: '100%', x: '0', }, { right: '-4rem', x: '100vw', }, '<') .fromTo('#hand-2', { x: '100vw', }, { x: '-100vw', }, '>') .from('#text-3', { x: '90vw', duration: '0.15', ease: 'none' }, '<'); return tl; } export function shirtTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#shirtSection', start: 'top bottom-=300', end: 'top top+=200', scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl .set('#shirt-container', { scale: '0.5', }) // Shirt .from('#text-4', { x: '-60vw' }) .from('#shirt-container', { x: '50vw', y: '-50vw', }, '>+=1') .from('#hand-3',{ x: '65vw', y: '-50vw', }, '<') .to('#shirt-container', { rotation: '5deg', ease: 'back', yoyo: true, repeat: 3, duration: '1', }) .to('#hand-3',{ x: '65vw', y: '-50vw', }, '<'); return tl; } export function bikeTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#bikeSection', start: 'top bottom-=200', end: 'top top+=300', scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl // Bike .set('#bike-container', { scale: '0.5', }) .from('#bike-container', { x: '100vw', }) .from('#hand-4', { x: '100vw', }, '<+=0.05') .fromTo('#hand-4', { x: '0vw', }, { x: '100vw', }, '>'); return tl; } export function shrimpTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#shrimpSection', start: 'top bottom-=150', end: 'top top+=200', scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl // Shrimp .set('#shrimp-container', { scale: '0.5', }) .set('#chopOne', { scale: '0.75', }) .set('#chopTwo', { scale: '0.75', }) .fromTo('#chopOne', { x: '0', y: '0', rotation: '0', }, { x: '-140vw', y: '-15vw', rotation: '60deg', }) .fromTo('#chopTwo', { x: '0', y: '0', rotation: '0', }, { x: '-140vw', y: '-15vw', rotation: '40deg', }, '<+=0.1') .from('#shrimp-container', { x: '-70vw', }) .fromTo('#chopOne', { x: '-140vw', y: '-15vw', rotation: '60deg', }, { x: '-55vw', y: '-25vw', rotation: '70deg', }, '<') .fromTo('#chopTwo', { x: '-140vw', y: '-15vw', rotation: '40deg', }, { x: '-55vw', y: '-20vw', rotation: '45deg', }, '<') .fromTo('#chopOne', { x: '-55vw', y: '-25vw', rotation: '70deg', }, { x: '-20vw', y: '-0vw', rotation: '45deg', }) .fromTo('#chopTwo', { x: '-55vw', y: '-20vw', rotation: '45deg', }, { x: '-20vw', y: '0vw', rotation: '20deg', }, '<'); return tl; } export function textTwoTimeline() { const tl = gsap.timeline({ scrollTrigger: { trigger: '#textTwoSection', start: 'top bottom-=300', end: 'top top', scrub: true, // markers: true, }, // to help animation happen in firefox, add rotation rotation:0.01, ease: 'power1', }) tl // Bottom Text // They cared .from('#text-5', { x: '60rem', y: '60rem', }) .from('#hand-5', { x: '60rem', y: '60rem', }, '<') .fromTo('#hand-5', { x: '0', y: '0', }, { x: '60rem', y: '60rem', }, '>') // They asked... .from('#text-6', { x: '-60rem', }, '>+=1') // and now... .from('#text-7', { x: '-60rem', }) // ten years ago... .fromTo('#hand-6', { x: '-80vw', }, { x: '50vw', ease: 'none', }) .fromTo('#text-8', { x: '60rem', }, { x: '0', ease: 'slow(0.7, 0.2, false)', }) .fromTo('#hand-6', { x: '50vw', }, { x: '-80vw', ease: 'none', }, '-=0.25') // Now its those... .from('#text-9', { x: '-60rem', y: '60rem', }) .from('#hand-7', { x: '-60rem', y: '60rem', }, '<') .fromTo('#hand-7', { x: '0rem', y: '0rem', }, { x: '-60rem', y: '60rem', }); return tl; }

The more I think about it, the more I think the issue is in defining them as functions. I was trying to make my code more manageable my defining each section of the page in its own function, then chaining them together in a master timeline with .add(). But it seems as if any of the children of the function dont render the changes until the beginning of the function. Is there a way to make those initial positions render at the very start of the master timeline? Or do I have to build it all out as one crazy long timeline? Or do I need to leave it the way it is, but have them all start at the same time, then figure out how long to delay the start of each animation? It all boils down to getting those initial positions/scales when the page loads, before the animation gets triggered, without creating more complexity (like pulling out each peace into a .set() of the master timeline - trying to manage all those moving pieces would become a nightmare).

Unfortunately it would probably take me forever to create a demo. Its pretty complex. But if someone was willing, I could do a zoom call with a screenshare to walk through it. I already tested immediate render, but with no effect.

If it helps, I am building out each timeline as a function in a .js file, then .add each function to a master timeline in the main file. It seems that as soon I reach the new timeline/function within the master timeline, those from values take effect. Is there any way to have those from values take effect when the page loads, or when the master timeline starts?

The values that I am setting on my from tweens are not being honored until scroll reaches the item. Once scroll reaches the item, the from value (x, y, or scale) take effect, the item jumps to this starting position, then animates correctly. Any idea why?