[Sequencing Tweens with Scrollmagic]

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!

[Sequencing Tweens with Scrollmagic]

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!