Issue with ScrollTrigger and .from tweens

steelemediasolutions · September 27, 2021

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?

steelemediasolutions · September 27, 2021

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?

OSUblake · September 27, 2021

Welcome to forums @steelemediasolutions

Do you think you make a minimal demo showing the issue? Also, be sure to check out how immediateRender works. Not sure if that if that might be related, but it's something to consider when working with from/fromTo tweens.

steelemediasolutions · September 27, 2021

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.

steelemediasolutions · September 27, 2021

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).

OSUblake · September 27, 2021

We don't need to see your entire project, just the bare minimum needed to show the issue. A couple of simple box animations is usually all that's needed. And most people find the issue with their problem when recreating a minimal demo.

OSUblake · September 27, 2021

Your functions can do whatever you want. If you need to set something first, then do that before returning a timeline.

mainTl.add(foo())

function foo() {
  gsap.set(...)
           
  return gsap.timeline()
    .to(...);
}

steelemediasolutions · September 27, 2021

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;
}

OSUblake · September 27, 2021

13 minutes ago, steelemediasolutions said:

But in the master timline, that .set doesnt get called until it reaches your function.

That set gets called immediately.

See the Pen oNwJNEN by GreenSock (@GreenSock) on CodePen

One problem you have is you are nesting ScrollTriggers. See the most common ScrollTrigger mistakes.

Just call your functions. They don't need to be a part of a master timeline if they have a ScrollTrigger.

chainTimeline()
textOneTimeline()
shirtTimeline()
bikeTimeline()
shrimpTimeline()
textTwoTimeline()

steelemediasolutions · September 27, 2021

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.

OSUblake · September 27, 2021

Seems to work fine here.

See the Pen OJgrPXQ by GreenSock (@GreenSock) on CodePen

steelemediasolutions · September 27, 2021

I will keep testing. Still having issues.

OSUblake · September 27, 2021

Did you watch the immediateRender video? Using from on the same target/properties more than once might not be what you are expecting.

.from('#hand-7', {
            x: '-60rem',
            y: '60rem',
        }, '<')
        .fromTo('#hand-7', {
            x: '0rem',
            y: '0rem',
        }, {
            x: '-60rem',
            y: '60rem',
        });

steelemediasolutions · September 27, 2021

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!

Issue with ScrollTrigger and .from tweens

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members