explorerzip

Thanks @OSUblake for the amazing example. I need to create a similar animation, but need to have it stop to show each image for a few seconds. Can you clue me in on how to do that? Also, when I try replacing one of the images, it does not radial wipe. Here's my example: https://codepen.io/glenn-ko/pen/YzMgJrV

I didn't even realize there was a ScrollToPlugin and it's exactly what I was looking for. Thanks for the quick response Jack!

I have a banner ad that has a legal section at the bottom. Is there any way to have the legal portion automatically scroll down when I get to a specific time or frame? I know of ScrollTrigger, but haven't used it as yet. Is it capable of scrolling at a specific time instead of waiting for the user to touch the mouse?

It is an interesting concept, but I agree not that practical. Especially when there are tools like After Effects and BodyMovin that have been around for years.

Sorry if this post is against the guidelines, but I came across this interesting open source project for React. Is GSAP considering doing something similar to this? https://www.producthunt.com/posts/remotion-3?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-remotion-3&fbclid=IwAR3h0AFyDo4_ktnL-SMCpoAXeh-XsqxcT2DfJa2bd6wJtG6ETsLar_Kuw-Q

I think I'm starting to get what you mean, but I have much more experimenting to do. It does make sense that a timeline or any DOM objects can't be in two places at the same time. Thanks also for your example code. I've never seen nor used arrow functions before as in your first example. Sadly I can't use arrow functions because I still have to support IE ?‍♂️ Banner ads need to show up on as many browsers as possible even though IE is basically dead. Example 2 makes the most sense to me, but the trick is to get the repeatDelay value right. Example 3 is interesting because I've also never used .tweenFromTo or .duration before. Really appreciate the feedback Jack.

I haven't needed to use child timelines before so I know I'm missing something. I don't really need to use a child timeline for this project, but figured I would take the opportunity to learn how they work since this project is simple. Is it correct that all timelines play concurrently unless I use paused:true? I'm having a tough time visualizing how this works. I'll read it a few more times and view your YouTube content some more. If I'm understanding correctly, the .add(wordTL.restart()) line is not doing executing because smoothChildTiming is set to false on my mainTL timeline? It also sounds like I can make smoothChildTiming to true, but it can cause some other issues? Can you have a look at my codepen to see where I'm going wrong with my code? Really appreciate you taking the time to reply Jack.

What's are the reason that I shouldn't control a timeline inside another one? Is one timeline not able to see what the other is doing? I'm also not sure what you mean by playing the child timeline when I need to. I assume that I need a delay in the child timeline? Maybe my example isn't the best place to use a child timeline?

Repeat: -1 won't work in my case because the master timeline needs to play just once. I only want to have the child timeline repeat once.

I am new to the concept of nested timelines. Haven't had a real reason to use them, but thought I'd give it a try to reduce repeated code. I have a child timeline that I want to play at the start of a master timeline and then restart it later on. The animation is for a banner ad. I added the child to the master and it plays once, but I can't seem to get it to restart. How do I get it to restart later in the master timeline? It seems as if the restart call to the child timeline interferes with the first line in my master timeline.

Oh cool. Thanks so much for the speedy response. Any thoughts on how to fix the warping of the plane image from the end of the path to the start on first load?

I have a banner animation where I want the plane graphic to leave a dotted trail behind it as it flies. I am having difficulty getting the timing right. Specifically, the plane completes its movement before the dotted path is revealed. The dotted path actually doesn't animate. I am changing the strokeDashoffset of the white path, which reveals the yellow dotted path beneath. So I'm wondering how to go about syncing the plane movement with the path reveal? I have tried negative offsets for the second "path" tween, but to no avail. Perhaps there is a better way to achieve this same effect without the need for the white path above the yellow dotted path? I also have the issue where the plane first appears at the top left or "end" of the dotted path and instantly warps to the "start" of the dotted path, but it doesn't show up that well in CodePen. Perhaps there are ways to optimize my css too?

Thanks for the reply Zach. I definitely know the benefits of GSAP and the price is excellent for what's included, but I'm not the one who would be paying the bill

I'm looking to use svg shape morphs (a heart morphing into a thumbs-up icon) on a standard banner ad. Does anyone know the size of the MorphSVG.js file and if Google even allows that library to run in banner ads on Double-Click? While the cost a Business Green license is not expensive, I still have to consider if it's worth it to get a license because I'm likely only going to use MorphSVG as a one off. Are there any other considerations when including MorphSVG.js in a standard banner?

Your question doesn't really relate to Greensock, specifically. It's more of a JavaScript / HTML question. From the link below, it looks like you can add / remove classes on page load using JavaScript. The behaviour will be reset if the end user clears their browser cache. https://teamtreehouse.com/community/use-javascript-to-animate-only-once