[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Is there a way to not play a tween until the first tween finish? So if I scroll fast the last animation don't play until the first one.

[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Have a new question hehe. 

 

If you see now, the page section index (2D, 2.5D, 3D) change on scroll. Do you know a way to make the animation not be crazy if you scroll fast? How do I make the interaction more cleaner?  If there's a way.

[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Oh men. You are the best!!! Thanks a lot!!!

I have to define all at first. Thanks a lot!

[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Its uncommented now

[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Sorry I commented to do other stuffs. I will uncomment now so you can view the problem.

 

Thanks.

[Scrollmagic + Gsap multiple tween on same elements while scrolling the page]

Hello everyone, need help here,

 

1. I don't know why but my codepen works but when I implemented on the website does not work. Any reasons why?

 

2. On the other hand, how I make these transitions more secure? Because when you scroll fast the animations has his glitches some times.

 

codepen:

See the Pen eExGqV?editors=1010 by G-ROS (@G-ROS) on CodePen

I don't know why it's doesn't work on the website.

 

these is the website code. The same!!! Just change the scroll triggers

 

// Scroll Interactions
  //Init Controller
  let controller = new ScrollMagic.Controller();
  // Ball Scene
  let ball = $('.ball');
  let xCenter = window.innerWidth/2;
  let yCenter = window.innerHeight/2;
  let ballTl0 =  new TimelineLite();
  let ballTl =  new TimelineLite();
  let ballT2 =  new TimelineLite();
  let ballT3 =  new TimelineLite();

  let ballScene0 = new ScrollMagic.Scene({
    triggerElement: '.hero-heading',
  })
  .setTween(ballTl0)
  .addIndicators()
  .addTo(controller);
  
  let ballScene1 = new ScrollMagic.Scene({
    triggerElement: '#feature1',
  })
  .setTween(ballTl)
  .addIndicators()
  .addTo(controller);
  
  let ballScene2 = new ScrollMagic.Scene({
  triggerElement: '#feature2',
  })
  .setTween(ballT2)
  .addIndicators()
  .addTo(controller);
  
  let ballScene3 = new ScrollMagic.Scene({
  triggerElement: '#feature3',
  })
  .setTween(ballT3)
  .addIndicators()
  .addTo(controller);
  
  // Change index
  
  function changeIndex() {
    console.log('change index!!!');
  }

  ballTl0
    .to(ball, .8, {css:{ x: '-12%', borderRadius: '50%'}, ease: Elastic.easeOut.config(.5, 0.4)})
  
  ballTl
    .to(ball, .8, {css:{ x: '10%', borderRadius: 0}, ease: Elastic.easeOut.config(.5, 0.4)})
    ;
    
  ballT2
    .to(ball, .5, {css:{ x: '-50%', borderRadius: '50%', scale: .5}, ease: Elastic.easeOut.config(.5, 0.4)})
    ;
    
  ballT3
    .to(ball, .5, {css:{ x: '-90%', borderRadius: 0, scale: 1}, ease: Elastic.easeOut.config(.5, 0.4)})
    ;

 

website:

http://muuaaa.webflow.io/home-newer

 (webflow for fast prototyping and great for design focus. I include de js I want).