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

Animate only helps you do the layout of all the assets. You still need to write GSAP code.

If you must use a graphical tool you could try out Google Web Designer. Not the most full-featured tool out there especially compared to Adobe Animate, but it is free. If you want someone to look at your project, you'll either need to host it on your own web-site or copy it to DropBox, Google Drive, etc. and share a link to it.

Yeah, I seldom see rich-media ads anymore. I guess marketers feel that the ROI is no longer there to develop and traffic these ads.

I know that 970x250 is a standard IAB ad. I was referring to having the ad start in the expanded state and then the user clicks a button to display the collapsed state. I haven't come across any rich-media ads like this. The only rich-media ads I've made thus far open in the collapsed (or smaller) state and the the user clicks a button to expand it to a larger state.

Has anyone come across a collapsable ad unit like this? https://onecreative.aol.com/view/public?ids=420584&keys=11e21a9d1a854e7eb97df74f90a9c15f&secure=true where the ad starts in the expanded state and when the user presses the Close Ad button, the collapsed state appears. Verizon seems to have developed this proprietary ad specification: https://adspecs.verizonmedia.com/adformats/displayads/970x250-billboard/ I think the idea is to have the ad move up and out of the way of web-page content. Google's expandable ads work differently in that they start in the collapsed state and the user initiates the expanded state. I have duplicated the expand / collapse functions with a Google provided template using Google Web Designer. I did have to "hack" that template so that the ad starts expanded and the user can initiate the collapsed state though. However, my media company has rejected my ad a number of times because it shows up as a 970x31 (the collapsed state dimensions) whey they expect the expanded (970x250) dimensions. I assume that I have to change my ad dimensions in CSS, but wanted to see what everyone thinks before I mess around aimlessly.

Try reaching out to Petr Tichy on Twitter: https://twitter.com/ihatetomatoes I learned so much from his YouTube videos. He wrote the Greensock cheat sheet and a number of courses. He used to do web-site deconstruction videos, but haven't seen him post in months. So he's likely very busy.

Unless you have a very compelling reason for using Flash / Animate, I'd recommend that you learn to hand-code banners vs relying on the often buggy Adobe software and the CreateJS plugin. Learning to hand-code is certainly daunting at first, but once you get the hang of it you'll wonder why you were relying on clunky software.

Banner ads usually need to meet IAB standards: https://iabcanada.com/content/uploads/files/IABCanada-AdGuidelines-English.pdf All animations must typically stop at 30 seconds, but 15 seconds is recommended.

There is a GSAP snippet for VSCode: https://marketplace.visualstudio.com/items?itemName=hridoy.gsap-snippets that will complete a block of code for you. You only need to replace the parameters. Once you gain a mastery of the syntax you likely won't need the snippet. Also have a look at https://ihatetomatoes.net/get-greensock-101/ for an excellent and free GSAP course.

VSCode aka Visual Studio Code is a free code editor by Microsoft, but it is not the same as Visual Studio. The latter is an Integrated Development Environment, which is overkill for most JavaScript projects.