Jump to content
Search Community

Sequencing Tweens with Scrollmagic

sirwin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween.

 

Here is the code I'm using currently to make this happen:

 


// Hockey Player Slide
	var tween = TweenMax.staggerFromTo(".hockey-boy", 1, 
  	{left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15);
	
	// build scene
	var scene = new ScrollMagic.Scene({
      
  		   triggerElement: "#hockey-player", 
           triggerHook: 0, 
           duration: 2000,
      
           })
    
		  .setTween(tween)
          .setPin("#hockey-player")
          .addIndicators({
          	name: "Hockey Player",
          })
	.addTo(controller);

 

http://empowerplay.webflow.io/

 

I greatly appreciate anyone shedding some light on this for me! Take care!

Link to comment
Share on other sites

Hello @sirwin and Welcome to the GreenSock Forum!

 

So in the link you provided what are we supposed to look at, since you have a lot going on in that site? What do you want us to scroll down to?

 

If it was me i would first get the animation you want and then incorporate ScrollMagic which controls the animation via scroll. Here you can see a video tut by The Mighty @Carl on how to sequence tweens

 

 

And this on how to use the position parameter:

 

 

Are you asking how to use ScrollMagic or how to animate something with GSAP. I'm sure if you create a limited codepen example we can better help you. All you need is a couple of tweens in the codepen so we can help you get the animation your after.

 

 

Thanks :)

 

  • Like 4
Link to comment
Share on other sites

Hi @sirwin :)

 

Welcome to the GS forum.

 

After reading your question and looking at the site, I'm assuming you want to move the hockey player partially through its tween (probably to the middle?), pause for a bit, complete the move to the right side and then scroll up? If that's the case, Sir @Jonathan is giving you some good info. You'd want to use a timeline with the position parameter to create a short pause in the animation. Here's a basic example of an element moving to the middle, pausing for a bit and then completes its journey across the page.

 

See the Pen rGZwqK by PointC (@PointC) on CodePen

 

You can see the second tween in the timeline is using a relative position of "+=2". That's what creates the short pause in the middle. Adjust that to your liking. Hopefully that helps. Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Thank you @Jonathan, and @PointC for your quick replies! I really appreciate it! To answer your question @Jonathan@PointC is exactly right. I'm wanting to animate the hockey player that slides in from the left, and pretty much exactly like that dog that's in his example, except with a little more easing potentially.

 

I will really dig into the info you both have provided! Thank you so much!

  • Like 1
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...