Jump to content
Search Community

Returning timeline with ScrollTrigger from function causes issues

ddi-web-team test
Moderator Tag

Recommended Posts

Hello

 

I'm working on a chart animation that uses a from tween to animate the bars from an opacity of 0 and a y coordinate of -50.

 

Because this animation is further down the page, I'm using scrollTrigger so the user doesn't miss the animation. The issue that I'm seeing to run in to is how scrollTrigger works in relation to nested timelines.

 

I have a master timeline called globalTL

const globalTL = gsap.timeline();

 

 

I have multiple functions that each return a timeline.

function animateIntro(){
    let tl = gsap.timeline();
    var staggersX = gsap.utils.wrap(['-200', '200']);
    
        tl.set('.section', {autoAlpha:1})
          .from('#intro-logo', {opacity:0, y:-100})
          .from('#intro-tagline', {opacity:0, y:100}, '<')
          .from('.yellow-card', {opacity:0, x:staggersX, stagger:.3})
          .from('.keep-scrolling-container', {opacity:0, delay:.5})
          .fromTo('.container-outter', {background:'#236192'},{background:'#eee', scrollTrigger:{
            trigger: '.finding1',
            start: 'top center',
            end: 'center center',
            scrub: 1,
            //markers: true
            
          }})
    
    return tl;
  }

  function animateFinding1(){
    const bars = document.querySelectorAll('#chart-container > div');
    console.log(bars)
    let tl = gsap.timeline({scrollTrigger:{
          trigger:'#chart-container',
          start:'center center',
          markers:true
        }});
        
        tl.from(bars, {opacity:0, duration:1, stagger:.25, y:-50})
    return tl;  //THIS CAUSES ME TO BREAK
  }
  

 

Finally, I add these to the master timeline.

 

  globalTL.add(animateIntro())
          .add(animateFinding1(), '<')

 

 

The problem with this approach is that it causes my chart to animate inconsistently. Sometimes the animation doesn't completely finish. Sometimes it never even starts. When it does finish, it goes to the complete state immediately. There's no actual tweening of the values.

 

The solution seems to be to remove the return statement from animateFinding1()

 

  function animateFinding1(){
    const bars = document.querySelectorAll('#chart-container > div');
    console.log(bars)
    let tl = gsap.timeline({scrollTrigger:{
          trigger:'#chart-container',
          start:'center center',
          markers:true
        }});
        
        tl.from(bars, {opacity:0, duration:1, stagger:.25, y:-50})
    //return tl;  //I'm commented out. Everything is fine now.
  }

I don't really understand why this is the case. I've tried adding the scrollTrigger to the from tween rather than the timeline.


My normal workflow is to create a master timeline, create functions that create and return timelines, and finally to nest those timelines in the master using those functions.

 

Is there something I need to consider when using this workflow with scrollTrigger? Is there some obvious fluke I'm missing? Thank you for reading.

See the Pen f774ea60d7b728f4f0186930716cdd92?editors=0010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

Link to comment
Share on other sites

Hey ddi-web-team. Putting ScrollTriggers on tweens or timelines inside of timelines is one of the most common ScrollTrigger mistakes. Doing so doesn't make much sense because both the timeline that it's in and the ScrollTrigger will try to control the progress. If you're going to attach an animation to a ScrollTrigger it shouldn't be inside of a timeline :) 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...