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

[guaby18]

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

 

 

[PointC]

Looks like it's working fine on the website to me. Your first animations are playing when you hit the trigger. You have some additional animations that play on your CodePen demo, but not on your website. The reason they don't play on your live site is because they are all commented out in the JavaScript.

 

I'm not sure what you mean by making animations more secure. If the user scrolls fast, the tween will reverse quickly - sometimes before it's done playing forward. 

 

Happy tweening. 

[guaby18]

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

 

Thanks.

[guaby18]

Its uncommented now

[PointC]

I'd try creating the timelines before adding them to the ScrollMagic scenes. I'd also suggest loading TweenMax before loading the animation.gsap script.

 

 

[guaby18]

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

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

[PointC]

Cool. Glad to hear it's all fixed. Happy tweening.

[guaby18]

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.

[PointC]

If you use the duration of the tween, it will just play/reverse as often as the user hits the trigger. Your other option is to set the duration parameter in the ScrollMagic scene which will hijack the actual duration of the tween. You could set it to something like 100 so it would play at the speed the user is scrolling. Of course this could also make it play much faster than you want if the user is really scrolling quickly. More info about the duration parameter can be found here:

http://scrollmagic.io/docs/ScrollMagic.Scene.html#duration

 

Happy tweening.

[guaby18]

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.

[PointC]

Sorry, I don't follow the question. It looks like you're using timelines in all the ScrollMagic scenes so the tweens will play in sequence. If you mean having another animation play once a timeline is done, you can use onComplete to call a function and play another tween or timeline.