Leaderboard

How can you disagree with that when you're already experiencing difficulty? That kind of proves my point. Angular1 has nothing in common with the current version besides the name. But what I was trying to get at is that there's a bunch different ways to create and customize CSS for theming, usually with some type of build process. This isn't directly related to CSS styling, and is more for SVG, but look at how easily an animation can be added to an app. There are similar tools for styling components just like that, but I can't remember the names of them right now. A component is more of an architecture or pattern. Web Components and Polymer are where you'll find most of the widget stuff. I'm not a UA developer, so I don't know a lot about the specs, but animating width and height has nothing to do with them. It invalidates the layout, and has to recalculate the size and position of everything and make any necessary adjustments, which can kill your framerate. It's no different than doing a screen resize. This is unlike transforms, which cannot affect other elements or the layout. Nope. I know how that app works, and it doesn't use a library. Go back to that site, disconnect from the internet, and then refresh the page. It should be working offline. The lag you saw was because it was your first time visiting the page, so a service worker was fired up to install some stuff for offline use. Well I didn't coin that term. That was done by Paul Lewis over at Google. I learned a different version, called a Relative Animation, which might be a better description, but nobody knows what that is, so I don't use it anymore. Every animation in GSAP has a start and end value, so there's nothing unusual there. In the Last step is where you would apply or remove any CSS classes/styling. You put the element in it's end state. The Play step really doesn't apply to GSAP as it will automatically play. That's more for people who have to manually start the animation. And this is where you get everything wrong. There's a time difference between screen refreshes, typically around 16.67ms, so you won't see it change visually. The invert step is the most important part, and is what pulls everything together, but you're not seeing the big picture yet because you think it can be done with className tweens. Can you get these two animations working correctly using className tweens? The video should not jump around when you toggle it. It's using the same CSS and layout from the original demo. This should animate between a column and row when you hover over it. And yes, there is a way to animate it. I'll explain more about this in another post.

I love SVG clip-paths or masks for this type of work. Pretty much the same thing I did in this demo except the text is linked to the timeline progress. Hopefully that helps or at least gives you some ideas. Happy tweening.

Hi, There were some issues with your code. In react inline styles are not applied like in regular HTML, take a look at the official React docs: https://reactjs.org/docs/dom-elements.html#style In that case is better to move the styles to the css file (SASS in the codepen). Then you're creating the TweenMax instance before the react class is even created, so when GSAP is instantiated there's no DOM element with the ID you're pointing to in the GSAP instance, so that throws an error as well. This code seems to do what you're expecting: class SvgReddit extends Component { constructor(){ super(); this.startPath = null; this.endPath = null; this.svgTween = null; } componentDidMount(){ this.svgTween = TweenMax.to(this.startPath, 1, { morphSVG:{shape: this.endPath, shapeIndex: 12}, fill: "#ff0000",ease:Bounce.easeOut }); } render(){ return ( <div> <svg id="Layer_6" data-name="Layer 6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136.66 171.86"> <defs></defs> <title>redditlogo</title> <path ref={path => this.startPath = path} id="start" className="cls-1" d="..." /> <path ref={path => this.endPath = path} id="end" className="cls-2" d="..." /> </svg> <h1 onClick={ () => this.svgTween.play() }>Devil</h1> <h3>or</h3> <h1 onClick={ () => this.svgTween.reverse() }>Angel</h1> </div> ); } } Also this code should be compatible with the latest version of react and respects the deprecation of the strings refs by using the callback to assign the DOM nodes in a declarative way. Happy tweening!!

Hi again, thanks.. @overdub60 That explains it.. chrome and safari on macOS will render differently then chrome on windows. And out of all webkit version chrome and safari on macOS or iOS have their own little quirks. I didn't see a glitch stutter on chrome windows 10, just a slight hesitation on start, but the animation was still smooth in @Carl's codepen. Just trouble shooting here since i dont have access to macOS... Try to check and make sure your image is completely loaded in the DOM and window before animating it. It using DOMContentLoaded and the window load event handler check. You can also see that in dev tools timeline and inspector on it timing if your animation is starting before the window and or DOM is ready. You can also try testing your codepen in debug mode since by default codepen displays in an iframe which can cause other render issues. Whereas codepen debug mode does not. You can always test that by changing the word /pen/ to /debug/ in your codepen URL. When you inspect your codepen ... Does it show on the inline style of the animated element in dev tools inspector transform: scale() or transform: matrix() or transform: matric3d() ? This will make sure that your element is animating on a new rendering layer and that it uses the GPU (hardware acceleration) instead of the CPU. Thanks for any additional info.

@PointC Here is MorphSVGPlugin version with small personal touch, the lines translate a bit before snapping.

I just thought I'd better give you a hard time about your profile pic since you were giving @Shaun Gorneau a hard time about naming his demos.

You can use any of the bonus plugins on codepen for free using these special URLs: https://codepen.io/GreenSock/full/OPqpRJ/ And you forgot to load TweenMax I bet the problem has to do with how you're creating your SVG elements and that they're not in the proper namespace. SVG elements are a different beast and for security reasons, most browsers prevent JS from interacting with it if it's not in the proper namespace. You must use createElementNS() instead of createElement(). Here's a function I made for myself that'll handle that (and a lot more) for me: function createElement(type, options) { options = options || {}; var ns = (options.svg || "|path|circle|rect|g|line|polygon|polyline|text|ellipse|defs|use|svg|".indexOf("|" + type + "|") !== -1) ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", container = options.container, attr = options.attr, reg = /([a-z])([A-Z])/g, element = document.createElementNS ? document.createElementNS(ns, type) : document.createElement(type); if (container) { if (typeof(container) === "string") { container = document.querySelector(container); } container.appendChild(element); } if (type === "svg") { element.setAttribute("xmlns", ns); element.setAttribute("xmlns:xlink", ns); } if (options.css) { element.style.cssText = options.css; } if (attr) { for (var p in attr) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attr[p]); } } return element; } //example usage: var element = createElement("circle", { container:"#id", css:"stroke-width:3; stroke: red;", attr:{ cx:100, cy:150, r:50, } }); I hope that helps.

The issue with my CodePen demo is my CodePen demo? Is that like when we type 'Google' into Google and rip a hole in the space-time continuum?

@overdub60 can you plesse provide - What browser you seeing this on? - What browser version you seeing this on? Since this seems very specific what your seeing. Thanks

I excluded filters since I have seen really bad repainting of nested children bug in Chrome. Where in one Chrome version will-change will render will-change: filter correctly. Then the next release of Chrome breaks that behavior. And then guess what? The next version of Chrome corrects the bad repainting behavior. Then rinse and repeat.. fun stuff @OSUblake if you report it to codepen they will look into that wiggity wiggity whack.

Oh boy, that's a total brain freeze . Thanks for the example @PointC, I think I'm going to have to do some proper background reading there. I've not used SVG clip-paths or masks before. Paul

Moving an object over another object is certainly in GSAP’s wheel house. Having one object affect the color (not with respect to blend modes) of another where an overlap occurs sounds like a good use of CSS masks and positioning.

Yikes!!! there was a missing part in the code. This: paintOutTimerCreator(){ if ( this.painOutTimer ) { this.painOutTimer.restart(true); } else { this.painOutTimer( 4, () => this.paintOutTween.play(0) ) } } Should be this: paintOutTimerCreator(){ if ( this.painOutTimer ) { this.painOutTimer.restart(true); } else { this.painOutTimer = TweenLite.delayedCall( 4, () => this.paintOutTween.play(0) ); } } I forgot to add the instantiation of the delayed call, sorry about that. Happy Tweening!!

@faderfrost ya it's useful to know how to hand code SVGs as sometimes you can fix/change minor things just from code or save yourself from going through the trouble of using illustrator for simple shapes. Check following thread for SVG gotchas Also check these two posts from @PointC You will find many helpful posts and demos from him in general. Also I would recommend checking out the YouTube channel for some quick starters and helpful tips. https://www.youtube.com/user/GreenSockLearning

You don't have to post your "real" project at all - just a super-simple reduced test case in codepen that shows the general concept(s). That'll exponentially increase the likelihood that you'll get a relevant, prompt answer. I don't really understand why you couldn't create as many circles and as many drawSVG animations as you want in your project. Maybe you just accidentally used the same mask for all of them instead of creating a new mask for each one? Again, a demo will really help clear this up. EDIT: I see that your JS does show that you're creating a mask for each circle, so that's good.

I'd second @Sahil's recommendation to join Club GreenSock. With what you're doing, those bonus plugins will save you a bunch of time and your membership will pay for itself quickly. You'll also save on aspirin as you'll have fewer headaches dealing with browser inconsistencies. More info here: https://greensock.com/club Happy tweening.

First example, I hand coded SVG. Just to be sure that I keep things in sequence, sometimes illustrator can do unpredictable things. Second example I did that with Illustrator, while creating the end paths illustrator changed them to polygons. So using illustrator can give you unpredictable output which will make it hard to animate stuff like my first example. Following article shows how you can hand code SVG, https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 For more advanced stuff you need to visit to W3 docs, or you can google for any other article. https://www.w3.org/TR/SVG/paths.html#DAttribute Your second example looks complicated to achieve without MorphSVGPlugin, most challenging part is creating circle using curves and then be able to convert those curves into straight lines. In my opinion, it will be worth going club membership as it seems really necessary for your project.

Sorry, you've lost me now. I'm not sure you'd need multiple dashed circles and masks unless I've completely misunderstood the desired outcome here. Do you happen to have a demo we could take a look at? Thanks.

Hi and welcome to the GreenSock forums, Since you are a Club GreenSock member you already have access to MorphSVG which is great. I would suggest you start like this: Create an svg with one visible circle and the shape you want to morph into hidden (the video here shows how to set up illustrator file https://greensock.com/morphSVG) Create a CodePen demo that loads MorphSVG (you can just fork this one) and paste in your SVG code Create a timeline with a single tween that moves the circle to the right and morphs it into your custom shape Once one animation works, add additional icons and animations add another circle (that acts as the menu icon) and place it over your other circles and program it to play / reverse the timeline on each click add the goo / blur filter effects from the demo you referenced. In other words, just start small. Once one circle morphs into another shape it should't be too hard to do the rest. If you get stuck along the way and need help with GSAP, just provide your demo and we'll take a look.

I didn't quite understand your question. Are you asking how to call a function whenever the playhead starts playing each and every tween, but only in the reverse direction? If so, why would that be helpful? Sometimes it's good to take a step back and ask the broader question about what the overall goal is because often there's more of an engineering issue at play that perhaps we could address. (PS: I think it'd probably be best to create a new thread in situations like this rather than resurrecting a 4-year old one )

@overdub60 glad you got it sorted out. Codepen sometimes will get all crazy with rendering making you go insane when its codepen that is the issue. Sometime there are browser bugs or browser constipation that will not honor when you tell it to force3D: true. Again this isn't a GSAP bug, but just how the various browser bugs affect each browser when using CSS transforms. Its like the wild west, so some times you have to get a posse together and reign in these longhorn browser bugs. As a rule of thumb to get around these browser bugs or criminal activity.. I sometimes add a slight rotation: 0.01 when using scale, x or y, which can also give you matrix3d() for hardware acceleration. Now this doesn't mean you always have to force hardware acceleration. Sometimes the browser will animate 2D perfectly without hardware acceleration. But there are times when hardware acceleration can have the opposite effect and cause stutter or jank (lost frames) due to browser bugs. So it's always best to test and inspect, then test and inspect. Other properties that can trigger matrix3d() are z, skewY, and rotationY. Happy Tweening!

@Jonathan Thank you!! Once I go out of /pen/ and into /debug/ everything renders smoothly! So it seems it's just a codepen issue! Also, I wasn't aware that maxtrix() performs better than scale(). Does that apply to scale3d() as well? I thought once we enable 3D, we always get hardware acceleration?

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo. Though your example is way too complex, you can simplify it as follows,

Are you saying that the one I built that only animates transforms is still too costly? SVG would definitely be worse. The main problem (after fixing the previous issues I mentioned) is that you're trying to move a lot of pixels. The more pixels, the harder it is on the browser typically. There's no magic bullet, but like I said earlier (and Blake/Craig advocated), a canvas solution is probably your best bet performance-wise. If you're still having trouble, please post the demo that illustrates the problem and we'd be happy to take a peek.

Don't forget about filters. will-change can be a huge optimization for filters that do convolution like blur and drop shadow. And I don't know what's going on with these demos, but it's creating some weird glitches on my computer. Look at how the code is glitching, and starts spazzing out.

Well ya, easiest way to go about it would to use MorphSVGPlugin, which won't be overkill at all unless of course you overuse it throughout the page. You can do that manually too but it is going to be time consuming to figure out how every effect should play out. GSAP animates any numbers or numbers contained within a string. So you can animate your paths by passing string of ending path. Downside to this approach is, GSAP does bunch of calculations to facilitate you to use complex paths and morph them into each other. If you try to do it manually, you will need make sure that your path is identical with only changing thing to be numbers. Your line, curve, arc should be in same sequence in both start and end path. If you can't keep the same sequence then you will need the MorphSVGPlugin. To save file size, you can use TweenLite but you will need few other plugins to make this effect work. 1. CSSPlugin to animate scale of the middle line. 2. AttrPlugin to animate attribute 3. EasePack plugin so you can use complex easing effects 4. CustomEase plugin to be able to use custom ease, as the easing effect that you have used isn't simple elastic ease. You will need to use customEase for it. 5. Finally you will need the TimelineLite as well to be able to simplify editing and to organize complex animations into single timeline. If you use TweenMax then you will only need customEase plugin as rest files will be included with it. If you don't want to use customEase then you can resort to using Back ease which will give you similar effect with minor compromise.

Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS. You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional. Animating properties like height and padding aren't any better. Look at what animating height triggers. https://csstriggers.com/height The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad. ? To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP. First - Record the initial state of your element, like its position and dimensions. Last - Move your element into its final state, and record those values. Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation. Play - Play the animation. The browser will go back to being happy again. I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP. It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM. var video = document.querySelector("#video"); Flipper.flip(video, videoModifier, { duration: 0.5, ease: Sine.easeInOut }); function videoModifier() { video.classList.toggle("minimized"); } There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling. Good idea? This is something I might be interested in making into a library if there's demand for it.

The MorphSVGPlugin will only change the path data, the stuff inside the d attribute. <path id="start" d="M129.06,46.05" /> To change the fill, you will need to set that yourself. function morph (){ TweenMax.to("#start", 1, { morphSVG:{shape:"#end",shapeIndex: 12}, fill: "#ff0000", ease:Bounce.easeOut }) }

Hi, I’m working on general purpose GSAP+SVG visual authoring tool. I just published very first beta and I need feedback from GSAP community. This is the very early beta – not polished and have only small fraction of planned features. My main questions are: 1) Do you need tool like this? 2) Is user interface convenient? What should be changed in UI? 3) What are the most important missing features? You can download beta from project web site at: https://aphalina.com First version is Windows only. I will really appreciate any feedback, Evgeny

Thank you very much! Problem solved!

Thanks for all your help! I will try to play around with this in codepen and then buy a membership later to download the plugins. I actually didn't thought these small animations would be advanced/complicated to do but now I know better. I will also teach myself how to hand code svg files. It seems like a skill that will become handy in many of my future projects. Thanks for the links.

Very nicely done, Sahil!

thank you @Jonathan!

I like the idea, very ambitious I'm on a Mac so can't test but would love to. My only quip with apps like this is file handoff, it'll require the next person to know how to understand the app in order to modify it. The difference between this and another app such as Animate CC from a user standpoint is that Animate CC already has a massive community of ex-Flashers that already know the app. Yeah, I know it's spits out clean code that "can" be edited but that wasn't the original format in was authored in (I'm assuming there's some sort of authoring file that this app works off of and it generates a different file -- but I could totally be wrong since I wasn't able to test it). This, unfortunately, is what I think what would stop something like this from catching on from the dev community. What I think this would be a good component for, is creating modular blocks of code for GSAP hand-coders, or for when it's too much of a pain to try and hand-code something (i.e. character animation). Perhaps it can generate a block of code with a GSAP timeline that can be inserted into an existing GSAP timeline, or have an option to, some sort of process that makes that portion simpler. A way for non-coders to work with folks who code as well. More of a "component helper" to GSAP coders, rather than a full-on hand-coding animation replacement. Perhaps it's a tool similar to Lottie/Bodymovin where it solves a specific niche. Or, I believe you can include CSS/JS inside of the SVG format, maybe this app could include everything, including animation, in a self-encapsulated SVG file (I believe I was reading a thread or post somewhere from Chris Gannon (that super-talented SVG animator) who was trying something like this out. Oh yeah, found that link. "Stop the madness!"-- lol.

When You make one animation the GUI approach can be as good as the scripted. But if You have to make dozens of size mutations from a master animation, the time spent on adjusting the start and end positions of the graphical elements can be huge. GreenSock script is fast and easy to write with dot chaining, I love to do it when I am finished exporting the assets and generated the HTML for them. When the client accepted the master animo, all i have to do is to make the different sizes, adjust the elements. The script can be left untouched most of the time. I agree with You in that the HTML and SVG even though is human readable, aren't meant to be human written. I hate the syntax of them, especially the SVG one, even more when it is combined with horrific CSS. This is why I spent months on writing my own HTML and SVG generator I don't want to see HTML or SVG code just the good little .js. Looking forward to try out Your tool.

Thanks for all the feedback! Unfortunately, none of the suggestions improve the tween smoothness for me. I removed the will-change properties completely since they neither improve nor degrade performance for me in this case. Also, @Carl, I don't see any difference in your example compared to mine. I also changed the TweenMax version to the most recent one. Again, no change. I also added the slight rotation suggested by @Jonathan, didn't help either. Weird! Here's my latest demo:

Very nice GUI, I feel the quality! But I have to contradict You in one part of this sentence "Animation should be drawn, not coded!" HTML and SVG should be drawn and generated, but GSAP script should be written by pure hand IMHO. It is the sweet, fun part of banner making. Furthermore the demand for additional custom .js code is alway popping up. Regards

@PointC ya certainly morph will be tricky but I think it's doable in two steps just like my demo. ya I will set profile pic there.

Nice work @Sahil I was just starting on something similar when I saw you post your solution. I think animating the d attribute string is a better approach in this case. I think morph might be a bit tricky. I haven't tried it, but I have a feeling it wouldn't be quite as smooth. Well done! PS Why don't you have your picture on your CodePen profile? How can I be sure it's really you?

They're looking for this line in your html file: <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> Then make sure your click-throughs and other events are using their Enabler class.

Hello @overdub60 and Welcome to the GreenSock Forum! I could not see the transform stutter using @Carl's codepen fork of your codepen in either Chrome or Firefox. In your codepen I did see a slight hesitation though on start. You should really look into using will-change very sparingly. It seems you are using it on properties that it wont even work on, like height. The CSS will-change property should only be used on CSS properties that regularly and constantly change, and need to be kept optimized. Only the following keyword values should be used with the CSS will-change property: will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: opacity; But you should really only use will-change for the CSS transform and opacity properties. Since they will be the only ones that can take advantage of getting a new stacking context and put on a new rendering layer. See Jack's ( @GreenSock ) article regarding this on CSS Tricks: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ Also keep in mind that will-change has some buggy intermittent behavior cross browser, especially in webkit based browsers like Chrome, Safari, Opera, and MS Edge. You can see the following article in regards to that. https://greensock.com/will-change I noticed in the browser inspector that when your element animates at first, that scale is not rendering using transform: matrix3d() or scale3d() on the element. This can be achieved by adding a slight rotation:0.01 on the GSAP tween to allow matrix3d(). That will create a new stacking context and makes your animation smoother. But again keep in mind that using will-change on parent and also children elements can give you worse performance and not better performance, thus negating the use of will-change. Just my two cents, Happy Tweening

Yep - your demo seems fine in Edge now. I threw a rotation:0.1 onto my demo and that seemed to solve things too. Weirdly, everything works correctly in IE11 without any extra fixes so I assumed Edge would be okay, but that's what I get for assuming. Edge is really starting to get fussy.

As usual, @PointC is right on. For the fun of it, I made a little dynamic demo that'll plot things around a circle and show you how to convert angles into the drawSVG % values so that you can do your variables accordingly: Just click on any of the green dots and you should see what I mean. That assumes you want to always start the drawing at the top. You could change that, of course. Hopefully this gets you headed in the right direction. In any case, a mask is likely what you need. Happy tweening!

Hi again @determin1st .. #1 We are helping you... #2 GSAP is already popular and does rule forever This isn't a GSAP algorithm thing . GSAP can only use what CSS property values are reported and computed by the browser, based on how you have your HTML and CSS setup. Like i said above this has to do with the CSS Spec on how height is calculated with box-sizing. As well as how the CSS box-model works. That is the nature of CSS, animating padding will affect height of its parent regardless if box-sizing is used or not Animating anything but transforms and opacity will cause jank (lost frames). Transforms and opacity do not cause a repaint and layout to be recalculated on every render tick frame. Transforms are also better for interface object, since they can animate on a sub-pixel level for silky smooth motion. Whereas padding and other non transform and opacity properties can only animate on a pixel level. And non transform or opacity CSS properties cant take advantage of hardware acceleration (the GPU) for smoother animation. You could take advantage of using transform scale instead of padding. We can only offer advise and solutions, but in the end its up to you. Happy Tweening!

It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump. If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations. What you can do is, 1. force height auto by using !important 2. First change padding of parent element and only then animate height of child element. 3. Manually animate height of parent and when animation completes, set height back to auto. 4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.

Hello @determin1st and Welcome to the GreenSock forum! I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders. CSS height spec: https://drafts.csswg.org/css-box-3/#the-width-and-height-properties You also have to take into consideration CSS inheritance, and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing. But you can get around this by: using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort. Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered. See Jack's @GreenSock article on this: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ See CSS Triggers: https://csstriggers.com/ Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better. For full control sometimes its better to just use a fromTo() tween instead of animating classes using className. GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo() Happy Tweening!

Someone else reported a similar issue yesterday and I noticed that their build system wasn't properly handling the "require()" calls inside files, thus the dependencies weren't loading and GSDevTools wasn't defined. I'm not entirely sure how to solve the dependency-loading problem in their build system, so to resolve things in their case I just added two import statements BEFORE the GSDevTools ones, like: import TweenMax from "gsap"; import Draggable from "gsap/Draggable"; import GSDevTools from "gsap/GSDevTools"; That ensures that GSDevTools has the stuff it needs loaded first (TweenLite, TimelineLite, some Power eases [all of which are in TweenMax], and Draggable). That assumes you dropped the files from the "bonus-files-for-npm-users" (from your membership zip download) into the node_modules/gsap folder, though you could do it in other ways too if you prefer. Does that resolve things for you?

The problem with using labels is that it doesn't push out the tweens that follow it. so in the example, if you used labels, the scale:2 would happen at the same time as the opacity:0 instead of the opacity:0 happening after the scale:2. Your solution with the little if statement in the middle does work though and it's intuitive. It's not quite as neat and tidy as having a "condition" variable in the animation object though.

This can help you : http://codepen.io/MAW/pen/mJyZdj