Jump to content
GreenSock

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

Sequencing Tweens with Scrollmagic

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!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×