Leaderboard

Yep, it does. It hurts until one day, it doesn't. I was struggling with arrow functions myself for a long while. Now I get them. So, now I am struggling with async/await. There's no end to the pain. Let us play this golf with a sandwedge, as we go along we'll pick bits and bobs, make a club. Before you realise it, you'll be swinging for birdies.

Hey MemeMaker, Yes it is possible to have multiple things being animated with GSAP. And yes, you got it right, you would want to create a constructor function that would take some params. Here's a Pen I made ages ago where one function creates different "views" - It's a bit complex but don't let it detain you, just go ahead and try creating the constructor function yourself, we can help you if you get stuck in the way.

Would it be a conditional? Sometimes being there, sometimes not? If so, wrap the line into a if() statement. // Somewhere at the start const img2 = document.querySelector("#image2") // Timeline setup const tl = new TimelineMax() tl.to( "image1", 1, { x: 100 } ) if( img2 ) { tl.to( img2, 1, { autoAlpha: 0 } ) } tl.to( "image3", 1, { autoAlpha: 0 } ) Also, better than adding a delay parameter to a tween in a timeline is to use the position parameter: // not wrong .to ("#image2", 0.5, {opacity:0, delay: 3}) // better .to ("#image2", 0.5, {opacity:0}, "+=3")

Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work. It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin, Few things to note, 1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes. 2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg. 3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join. 4. SVG overflow is set to visible so stroke won't get partially hidden.

Yes, GSAP can tween the pseudo elements :before and :after using the CSSRulePlugin https://greensock.com/CSSRulePlugin

Looks like a neat script, but it's $49 for unlimited commercial projects. SplitText can do all that (& more). IMHO, it seems like Club GreenSock would be a better bang for the buck since you'd get a bunch of bonus plugins in addition to SplitText. https://greensock.com/club https://greensock.com/SplitText If you haven't seen them yet, here are a couple threads showing a typing effect with SplitText. But as @Carl mentioned, you'll probably have better luck with their support channels. https://github.com/alexmacarthur/typeit/issues

Here's a fixed/forked version: I noticed several problems with your CSS: You need to set overflow-y:scroll or overflow:scroll so that it's actually scrollable. You have the height of that containing element as 700px, but only 5vh is actually visible. You can't scroll beyond the end of the content, so the hundreds of px that's off-screen will prevent the content from ever reaching the visible area. I set the height to 5vh just so you can see what's going on. Also note that you can scroll to an element selector if you'd like (that way, you don't have to guess at a specific number). And if you're loading TweenMax, there's no need to load TimelineMax separately (because it's inside TweenMax already). Does that help?

Hi Devotee007, I'm not following what is it that you mean when you say: "Draw Meet"... Could you explain a bit more? Better yet would be if you made a thread of your own as I feel it will confuse other readers by mixing your question with the original one.

Hi cbg, Our beloved moderator @Jonathan taught me long ago: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { window.addEventListener("load", function(){ // place your code here }); }); That will cause all the code nested inside the event listeners to wait until the DOM is ready and all assets are loaded. You should then be able to tween your elements as you desire.

Thanks for the demo. Yes, it's an overwrite situation as @GreenSock thought. Drop this code into the beginning of your JS and you'll see the difference. TweenLite.defaultOverwrite = "false"; It doesn't make any difference that this is a DrawSVG tween. The same thing can happen with any type of tween. When you create a fight and overwrite a tween you end up with a new starting point. I think you're trying to have the tail end of those strokes 'chase' the other end off screen? If so, you're basically trying to create two DrawSVG tweens on the stroke at the same time and that won't work. You'll probably have to rework this a bit or use a mask to erase them. Happy tweening. Edit: DOH! Jack already replied.

appendMultiple is indeed deprecated and replaced with add().

Indeed... the blunder has been corrected master!!!

Sorry about any confusion there - I can make ScrollToPlugin accommodate relative values like that in the next release. In the mean time, feel free to use @Rodrigo's suggestion (though I think he meant "scrollLeft" rather than "scrollTop")

Who copied who?

Pointing out the error in a minified file does not help. Try using a regular file and expanding the error. Human readable code! https://unpkg.com/gsap@2.0.2/umd/TweenMax.js GSAP can't do it's hack to set the transform origin because the leaf isn't in the DOM. // BAD function createLeaf(container) { let leaf = document.createElementNS('http://www.w3.org/2000/svg', 'path'); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); container.appendChild(leaf); return leaf; } // GOOD function createLeaf(container) { let leaf = document.createElementNS('http://www.w3.org/2000/svg', 'path'); container.appendChild(leaf); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); return leaf; }

GSAP can tween anything. Check out this post where @Carl shows how it was used for Falcon Heavy's side boosters.

You guys are the best. I'll do the easy fix for now (deadlines and such), but it's good that I experienced this, so I will definitely keep it in mind for the future!

Yep, as I suspected, you've got overwrites/conflicts happening. If you add this to your code, you'll see it: TweenLite.onOverwrite = function() { console.log("OVERWRITE"); } Basically, you have overlapping tweens that are fighting for the same property value simultaneously. That's generally not a good thing and it means you should rework your animations to avoid it. But if you want to just skip overwriting across the board (easy "fix", but be careful), you could do: TweenLite.defaultOverwrite = false; Or set overwrite:false in any of the afflicted tweens if you want to control it per-tween. Does that help?

I'm not sure I understand the question and there is no demo included, but it sounds like you'd want to look at the refresh() method. http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh I think all of your questions since joining the GS forum have been about ScrollMagic and I've answered several for you, but ScrollMagic is not a GreenSock product. They do have a support area here: https://github.com/janpaepke/ScrollMagic/issues We're happy to help with GSAP related questions and problems. Including a demo will get you the best possible answers. Happy tweening.

Hi @kbeats, and welcome to GSAP! To get two tweens on a timeline to happen at the same time, you would set the position parameter. And more info on that https://greensock.com/position-parameter Happy tweening!

Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent

Our company is in the digital signage business. We sell engaging motion graphics content to companies with large numbers of digital signs (airports, waiting rooms, banks, etc). We have a LOT of projects in the queue for the next few years and are looking for an experienced GreenSock animator (and web developer) to join our team in Minneapolis. Salary range is $60k - $90k + perks and benefits (but is negotiable depending on experience). Please read about the position here: https://www.screenfeed.com/careers/front-end-developer We are only looking for people who Have demonstrable GreenSock experience. Live in (or are planning to move to) Minneapolis, MN USA. Please don't apply if you're looking to work remotely. Have some web application development experience.

Hi, Actually this has nothing to do with React (how about that React is not the culprit, who would have suspected?? ) but with the fact that the ScrollTo Plugin doesn't work with relative values like a regular tween using the CSS Plugin, that's why the first code you posted doesn't work (it actually doesn't work with or without React) and the second snippet does. What you can do is access the scrollLeft property of the target element and add the increment value to that: TweenMax.to(content, 0.5, { scrollTo: { x: (content.scrollLeft + incrementNumber) } }); That should do the trick. Let us know how that works. Happy Tweening!!!

Wow that is exactly what I was looking to do! Your note about being able to use gradients in masks is interesting. Applying a gradient to the path would allow for a softer path reveal instead of a hard edge. Going to have to look into that. Thanks for the quick response!

@GreenSock Here is a link to the final codepen example. https://codepen.io/sias/pen/vzWWKR It makes more sense to view the pen in vertical mode to see how it is affected by the height of the various sections. But ultimately, I needed this to interact with scrollmagic so as you scroll, it scrolls the window to these various IDs. You nailed it with the idea of scrolling to the IDs. I didn't understand that the scrolling was in the view of the actual div that was being affected. So, thank you very much. Hopefully this will help someone else who is trying to accomplish this same trick.

There are many approaches you could take with this. Here's what I'd personally do because it'll probably deliver maximum performance and it's relatively straightforward (once you get the concept): I'm using a single timeline that basically animates things from left to right and then mapping that animations progress() value to the draggable position. So when it's in the center, progress() would be 0.5. When it's all the way to the left, progress() would be 0. All the way to the right, it'd be 1. That way, you're not constantly having to set() values or track the mouse or whatever. Nice and zippy. I gave you a "range" variable so you can control how far from the center the card can be pulled before things are fully rotated/scaled. Have fun!

thanks! that does help. ill post final pen that does what i am trying to accomplish...

I'm not sure what you mean by scroll, but I assume it's a 'type from the center' animation? You can do that with SplitText. Maybe something like this. Happy typing.

Did you look at the links he posted? There's a bunch of different demos to learn from.

Good catch! That's just because the SVG element wasn't added to the DOM before there were transform-related values set, so it's just a matter of flip-flopping these lines: //OLD: TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); container.appendChild(leaf); //NEW: container.appendChild(leaf); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); Firefox throws errors when you try to grab certain values on an SVG element that's not visible or in the DOM (like getBBox()).

Very cool! I had no idea lol. Thank you!

Sorry, I'm not familiar at all with typeit. Please try their support channels. We have to keep our support focused on the GSAP API. Thanks!

Sounds good. It's officially item 1,437 on my 'to-do' list so I may not get to it until the year 2029. Unless you're gonna let me use your Blaketrix headjack so I can learn it in a few seconds.

The signal is only visible at night, so it might be awhile before he actually sees it. Maybe you should fill that void. I hereby promote you to the role of Senior Daytime React Answering Manager, so you should start learning it. I think the basics are pretty easy to pickup, and being able to combine JavaScript with HTML/SVG is a joy. https://reactjs.org/ https://reactjs.org/tutorial/tutorial.html

Hi @Kalimeromax I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete. See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.

If anything is confusing in that demo, it's probably not related to GSAP, but rather JavaScript itself. Understanding the basics of an object might be a good place to start. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics You use objects all the time. The tween is an object. So is the curly brackets inside the tween. var myAnimation = TweenLite.to(box, 1, { x: 100, y: 200 }); You don't have to write the object inline like that. This works. var config = { x: 100, y: 200 }; var myAnimation = TweenLite.to(box, 1, config); After an object is created, you can still add stuff to it. This will animate x, y, and rotation. var config = { x: 100, y: 200 }; config.rotation = 90; var myAnimation = TweenLite.to(box, 1, config); As I said in my previous post, an element is object, so you can add whatever you want to it. var box = document.querySelector(".box"); box.mySuperAwesomeAnimation = TweenLite.to(box, 1, { x: 100, y: 200 }); box.mySuperAwesomeAnimation.timeScale(0.5); box.twoPlusTwo = 2 + 2; console.log(box.twoPlusTwo); // 4

There's no chaining. He's creating an animation for an element, and then storing that animation on the element to make accessing it easier later on. An element is an object, and you can add properties to an object after it's created. The name doesn't matter as long as you don't use a name that is already being used or is reserved. var box = document.querySelector(".box"); var Anim; box.mySuperAwesomeAnimation = TweenLite.to(box, 0.7, { yPercent: -100, paused: true }); // later on you can access that animation box.mySuperAwesomeAnimation.play(); // creating an alias to the animation Anim = box.mySuperAwesomeAnimation; // both of these will work. They are the same animation Anim.play(); box.mySuperAwesomeAnimation.play();

If it's a keyframe editor, I wouldn't worry about changing an animation in real-time. I would only (re)create the animations if there are changes when the user presses play. That way you only have to deal with manipulating data. Basically, you would do this reverse of this. Create an animation from some data structure.

My apologies. When I see React in the thread title I just assume the Rodrigo React Signal has been fired up and my services will not be necessary.

Note: TimelineMax allows you to set a repeatDelay value too, in case that's helpful. new TimelineMax({repeat:-1, repeatDelay:3}); And if you must use TimelineLite, keep in mind that restart() accepts a parameter that'll honor any delay as well, so you could do: var tl = new TimelineLite({delay:3, onComplete:function() { tl.restart(true); }}); //and if you want the first iteration to start immediately, you could just do: tl.play(0); Happy tweening!

You can change the speed by changing timeScale on reverse. But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks. https://css-tricks.com/writing-smarter-animation-code/

Oh my turn! my turn!! PS: Sorry couldn't resist

Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.

Oh I see, well thank you very much Jonathan this will help me a lot! As a newbie here it's really exciting to see how many possibilities greensock offers. Thanks

Thanks so much for your replies guys. Will post an updated pen once I get around to digging into these suggestions.

Here is an example of an SVG Filter - Gaussian Blur: http://codepen.io/jonathan/pen/GJPjjQ?editors=101 With this one GSAP taps into the feGaussianBlur tag using stdDeviation to animate the Gaussian Blur using the AttrPlugin, like Carl had suggested above. Hope this helps!