Leaderboard

Although Shaun already illustrated it perfectly, I just want to add that timelines and tweens can be passed into functions and also returned from functions. At their core a GSAP animation is just a javascript object. Check out this article for more fancy (and practical) ways to make use of this: https://css-tricks.com/writing-smarter-animation-code/

Start with this and modify as you see fit

Hey, @wneet, you're doing good. Just in case you had the same gut reaction as I did with Blake's last reponse, he does sound a bit grumpy but he's not. He's super nice and a good teacher, just sometimes his words are a bit too dry. We've all been there (I think) and tried to work with code we don't understand, I certainly do it all the time. Just keep looking at all examples you can find see why they are different and not how old they are. As time passes, the techniques get refined and new ways of doing things are thought of. Happy Tweening!

@wcomp, I've forked your pen and made notes. Should explain everything Hope this helps!

Hi, Here are some 'deconstructions': Taotajima.jp WebGL deconstruction Best regards Mikel

I have a feeling the eventListener will take care of that for you. It's a balance between being the best tool for one thing and being a tool that does a lot of things. GSAP is more about being the most flexible/efficient tweening engine around at the expense of pre-packaged solutions.

that's a good find. using that information my code can be simplified if we specify the target param modifiers : { x : function(x){ return x%500; }, opacity : function(x, target){ return target._gsTransform.x / 500 } also worth noting, in your example you are specifying "div" as the target of your tween so this.target is a nodelist (like an array) this.target[0] is the first div

Please close the Ticket. Issue has been solved due some Timeline / Tween Reorganisation. As always, GreenSock Rocks ! Thanks you and cheers, Krisztian

Again, set its position to fixed. https://codepen.io/osublake/pen/c0167e469feb95cd8ced1835d4e92919 And stop copying other people's code you don't understand. I've seen that code before, and it's not a good example to follow.

Wow! I got so much out of that. Thank you so much. (Great pen, too. I had to watch and listen to the end:)

Thanks! For now I just added a simple function to log that the animation is complete, and the animation restarts as expected with no errors (because of the repeat: -1 passed in as params to this.tl = new TimelineMax(....). Always a nice when it's an easy fix! A quick note for posterity...depending on how you do this, especially with react, you may need to add 'this' in front of the onCompleteAll callback. Here's the WALL of code again: onCompleteAll() { console.log("Animation complete"); } updateSlider() { this.setState({ sliderValue: Math.round(this.tl.progress() * bookingData.length) }); } componentDidMount() { bookingInterval(); //animateBookings(); //Animations with GSAP this.tl = new TimelineMax({ onUpdate: this.updateSlider, repeat: -1 }); //controls time in seconds in between booking cycles var next = 3; //controls fadeout var nextOpacity = 5; var opacity0 = 10; var fadeOutDelay = 10; //how long markers and lines remain on screen prior to fadeout var fadeOutDuration = 3; //how long it takes bookings to fadeout this.tl .staggerFrom( ".animatedTick", 7, { ease: Power3.easeInOut, y: 1000, opacity: 1 }, next ) .staggerTo( ".custMarkers", 0.3, { autoAlpha: 1, ease: Elastic.easeOut.config(0.2, 1.5), opacity: 1, scale: 5, force3D: false, yoyo: true, repeat: 1 }, next, 1 ) .staggerTo( ".clientMarkers", 0.3, { autoAlpha: 1, ease: Elastic.easeOut.config(0.2, 1.5), opacity: 1, scale: 5, force3D: false, yoyo: true, repeat: 1 }, next, 1.5 ) .staggerTo( ".lineAmation", 1.5, { visibility: "visible", ease: Power3.easeOut, autoAlpha: 1, opacity: 1, strokeWidth: 2 }, next, 2 ) //FadeOut animations are chained to the original timeline, with a new set of animations for each target .staggerTo( ".animatedTick", fadeOutDuration, { delay: fadeOutDelay, autoAlpha: 0, y: -200, x: 100, scale: 0, rotationY: -360, display: "none", ease: SlowMo.easeOut }, nextOpacity, opacity0, this.onCompleteAll ) .staggerTo( ".custMarkers", fadeOutDuration, { delay: fadeOutDelay, autoAlpha: 0 }, nextOpacity, opacity0, this.onCompleteAll ) .staggerTo( ".clientMarkers", fadeOutDuration, { delay: fadeOutDelay, autoAlpha: 0 }, nextOpacity, opacity0, this.onCompleteAll ) .staggerTo( ".lineAmation", fadeOutDuration, { delay: fadeOutDelay, autoAlpha: 0 }, nextOpacity, opacity0, this.onCompleteAll ); }

It looks like your last 3 staggerTo() calls have a NUMBER as a parameter where a callback function is expected. Like: .staggerTo( ".custMarkers", fadeOutDuration, { delay: fadeOutDelay, autoAlpha: 0 }, nextOpacity, opacity0, 1 // <-- BAD!!! Should be an onCompleteAll function. ) See the docs: https://greensock.com/docs/TimelineLite/staggerTo() Does that help?

thanks for letting us know.

You can't stop it from happening, true. You can, however, write a blog post explaining why that's not optimal, refer people to it, became a web-celebrity and rake millions from it in a pyramid scheme.

I guess I'm not following what it is you're after. Can you tell me if these two statements are true, and if any logic is missing? 1. The circle should follow the mouse cursor around the page. 2. When scrolling up or down the page, the circle should stay with the cursor in as close to real time as possible. If so ... my CodePen does exactly that. And if you are not seeing that ... can you tell me which browser and OS you're using?

Let's kick this nest of wasps, then... Why? What is so wrong that elicits such passion from you, Blake? Oh why so much hate in your heart? Shouldn't we all be more loving?

@Dipscom Thank you so match for your kind response In fact I'm still learning this new technique.. I will do my best to learn it..

Still an issue for me unfortunately Update: Applied the style to the element specifically (I had a couple of spans inside a h2) and it helps! ? ( Still a little jump but luckily not very noticeable :)

Sorry, I read your answer a few times and I'm totally lost. Do you know what transformOrigin does? I'm concerned we may have a language barrier at play here. Is there a GSAP-specific question we can help you with?

It depends, really. Are you thinking of a situation where someone will be resizing the window while the tween is running? Or are you thinking of a situation where the leftover styling might be the problem? For the first question, there isn't really a easy simple way. You'll have to keep track of the animation, listen for the breakpoint event, save the tween progress, rebuild the tween, reposition the progress. For the second, it's a tad easier. Just use clearProps in your tweens. :)

Hi @payne199, It's hard to see what could be going wrong without seeing the issue isolated in a Codepen .. but here is one I whipped together that may help you. Hope it helps!

You'll want to setup a timeline that's paused and will play, or reverse, on hover. I added a quick TL and hover function to your pen, you'll likely want to tweak to get the overall feel the way you like.

in addition to the other great advice you could: 1 - Build your entire timeline without the photo animation and then add it LAST at the time you want. var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".button", 1.0, {opacity:1.0}) .to(".apple", 1.0, {opacity:1.0}) .to(".orange", 1.0, {opacity:1.0}) // when all tweens are added then add the photo .to(".photo", 12.0, {scale:1.2}, 1) 2 - create a master timeline with some tweens and the photo tween and then nest another timeline with all the other stuff in it anywhere you want in the master timeline. var otherTimeline = new TimelineLite(); otherTimeline.to(".otherThing1", 1, {x:100}) otherTimeline.to(".otherThing2", 1, {y:100}) otherTimeline.to(".otherThing3", 1, {x:100}) otherTimeline.to(".otherThing4", 1, {y:100}) var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".photo", 12.0, {scale:1.2}) .add(otherTimeline, 1)

Hi, Well this are always a good starting point: http://www.greensock.com/jump-start-js/ http://www.greensock.com/sequence-video/ In terms of nesting, my idea is that the more you nest the better it is. For example you have 10 different timelines, some of them might play in sequence and some others might overlap. Imagine setting the particular delays of each one in order to accommodate what you're doing and let us assume that you can get to that point, everything is working fine you show the stuff to your client and they tell you:"mhhh, you know what, why don't you make the logo animation a little bit longer", and the freaking logo animation is the second timeline, that'll mean that you have to adjust, BY HAND, the delays and durations of the other eight timelines and their particular delays, you're in for a nightmare. While if you work with nested timelines and you add every particular timeline into a label, that duration change in the second timeilne means nothing, because the timing and sequence of the rest of the animation is pushed by that amount of time automatically, in fact you can put a very cool face and said:"absolutely, just give one second", you open your code editor, adjust the timing, play the animation again and your client jaw drops to the floor (of course the jaw dropping part might not happen, but still you're going to look good). My advice is: 1.- Nest as much as you can, if you need to put a timeline, inside a second one and then nest the second one in a master, do it, because that also will allow you to isolate any issue you could find while writing your code. 2.- Always use labels, they are incredibly helpful, specially for the scenario you indicate, when some timelines will play at the same time. Like the sample I mentioned, if you put your timelines relative to a label position your life will be incredibly simple when you need to make changes. 3.- Bookmark both the Greensock collection in Codepen and the JS API docs, I can't tell you how helpful this could be. I hope this comes in handy. Happy Tweening!! Rodrigo