Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
guaby18

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

Recommended Posts

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

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

Thanks.

Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

  • 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.
×