Leaderboard

Hi @brightpixels If it were me, I'd use a timeline that could just start over on click. If you want to return a tween on each click like your demo, you'll end up with overwrites. To fix that you could use a .fromTo() tween like this: return TweenMax.staggerFromTo(elm, 1, {opacity: 0, x: -5}, {opacity: 1, x: 0, ease: Back.easeOut.config(4)}, delay); Hopefully that helps. Happy tweening.

You'll see a flicker because it's not animating back to its initial state at zero alpha/opacity, before they fade in again on the loop. You need to add more tweens to fade each one back to zero alpha/opacity before looping.

Throw up a codepen link so we can see what you're seeing and help troubleshoot, if you're able.

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!

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

Hi and welcome to the GreenSock forums, There is really no reason to have to update and track the durations and delays are you are doing. TimelineMax solves all the problems with that technique. It would be really great if you would create a CodePen demo so that we could actually help you modify the code, but here is something that should roughly work. I didn't go crazy trying to match all the timing, but you can replace your TweenMax code with this: var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.to(copyA, 3, {autoAlpha:1}, "+=1") .to(copyB, 3, {autoAlpha:1}, "+=0.6") .to(copyC, 3, {autoAlpha:1}, "+=0.6") .to(cta, 0.8 {autoAlpha:1}, "+=1") .set(logo, {autoAlpha:1}, "+=1") .to(logo, 1, {left:-325, ease:Power2.easeOut}, "+=1") You are loading TweenMax which already includes TimelineMax so there is nothing to worry about regarding files size. Definitely watch these 2 videos in our learning section: https://greensock.com/sequence-video https://greensock.com/position-parameter The hour or 2 you invest in learning timelines will save you days of time in your future banner work.

Simple syntax error. You are nesting delay in the css object. bad: TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10", delay:0.5}, ease:Power2.easeOut}); good: TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10"}, delay:0.5, ease:Power2.easeOut}); FWIW you really don't need the CSS object at all. If the target of your tween is a DOM element and you are tweening css properties, that object gets created automatically behind the scenes. You can just do: TweenLite.to($rsContent, 0.4, {opacity:"0.10", delay:0.5, ease:Power2.easeOut}); http://codepen.io/GreenSock/pen/zgsof More info on the CSS object read the intro to the CSSPlugin docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html More basic demos: http://codepen.io/collection/ifybJ/