CODEWITHSUNDEEP
javascriptcssgsapscrollmagic
Layne
Layne

Reputation: 672

How do I animate bottom AND opacity attribute in GSAP and ScrollMagic?

With the following code I am able to stagger animate the position and fade the text in. But what I'd like to accomplish is to move, fade in, and then fade all copy back to 0 by end of scroll. So moving is working fine. I just want the same <p> tags to fade in then back out by end of scroll.

// init controller to hold all commands/animations
const controller = new ScrollMagic.Controller({ addIndicators: true });

const tween1 = TweenMax
  .staggerTo('#parallax p', 1, {
    bottom: $('#parallax').height(),
    opacity: 1,
  }, 0.06);

// All commands/animations live in a scene
new ScrollMagic.Scene({
  // Element to watch
  triggerElement: '#parallax',
  // Point at which animation starts, default is center of screen
  triggerHook: 0, // 1 onEnter, .5 onCenter (Defualt), 0 onLeave
})
.setPin('#parallax')
.setTween(tween1)
.duration('100%') // Percentage of full screen or hard-wired number of pixels
.addIndicators({ name: 'FADES' }) // Indicators marked on screen
.addTo(controller); // Add this scene to controller

Side question: If the animation is keyed to scroll through ScrollMagic, what is the 1 for in the following line: .staggerTo('#parallax p', 1, {?

Edit: More appropriate CodePen added

Upvotes: 0

Views: 1265

Answers (1)

Paul Thomas
Paul Thomas

Reputation: 2776

Something more like this? https://codepen.io/motionimaging/pen/155bf1892710fb95dcc81ddb7201adb0/

// init controller to hold all commands/animations
const controller = new ScrollMagic.Controller({ addIndicators: true });

var timeline = new TimelineMax();
var tween1 = TweenMax.staggerFromTo("#two p", 1, {bottom: 0},{bottom: $('#two').height()}, 0.1);

var tween2a = TweenMax.staggerTo("#two p", 0.5,{ opacity: 1 }, 0.1);

var tween2b = TweenMax.staggerTo("#two p", 0.35,{ opacity: 0 }, 0.1);

timeline.add(tween1, 0)
    .add(tween2a, 0)
    .add(tween2b, 0.5);

new ScrollMagic.Scene({
   triggerElement: "#two",
  triggerHook: 0,
})
.setTween(timeline)
.setPin("#two")
.duration("200%") 
.addIndicators({ name: "FADES" })
.addTo(controller);

Upvotes: 1

Related Questions