Leaderboard

Hi and welcome to the GreenSock forums, Not a stupid question. TweenMax is a single JS file that loads many different tools, among them are TweenLite and CSSPlugin. Once you load TweenMax.min.js you can create TweenMax or TweenLite tweens because TweenLite is included in TweenMax. In the example you referenced the code is trying to animate the css left and top properties of a DOM object. In order to do that CSSPlugin is necessary. Since TweenMax is loaded, that demo has access to CSSPlugin also. We lean towards recommending loading TweenMax because it includes all the stuff you need on 90% of your projects in one file. If you want go very lean, you can load TweenLite AND CSSPlugin separately locally or from these CDN urls https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js Here is a forked version of that demo that loads TweenLite and CSSPlugin If you haven't seen it yet, check out our updated Getting Started guide as it gives an explanation of what CSSPlugin does and why its necessary.

Hi @tomKnox That is the expected behavior with all the staggers going to the same location. You could add a .to() tween to the loop and target paths[0], paths[1] etc..., but I think this is good case for function based values. More info: https://greensock.com/function-based Happy tweening.

A tween can't exist in two places at the same time - you put 2 of the tweens in two different timelines. So they got removed from the first one and put into the second one. A tween can only have one parent. See what I mean?

hmmm... that looked fine to me too. I couldn't get the demo to replicate the issue. In your screen grab, the word professional is split in the middle, but shouldn't be. Maybe try adding words to your split. If you do that, you'll also have to make a slight adjustment to the animation too. Right now, we're grabbing all the nested divs (chars) in the .line div and animating them, but adding words to the split will add additional divs. You may need to add a class to the chars when you split and then just target that class in each .line div. Hopefully that will correct the issue, but as @Carl mentioned, a demo showing the issue would be great.

yeah, there isn't a whole lot i can do with those 2 code snippets, but i noticed you have from() tweens for buttonSearch in 2 places. immediateRender is usually involved any time you have multiple from() tweens on the same properties of the same object. perhaps something is being set in one of the from tweens that makes the element appear "wrong" somehow. No way for me to know but here is a video that explains immediateRender as a side note, it seems a bit strange to put delay:0 in a timeline tween. I'd recommend switching to the position parameter to control tween placement in a timeline: https://greensock.com/position-parameter

i would loop through the elements, create a tween for each element and insert it into a timeline at a random time like:

type: "chars, lines", <-- places current div content into chars and lines? Yes - chars and lines will wrap a line div around all the chars divs. You can add words too, but it wasn't necessary in this case. If you use all three, the chars will be wrapped in the words which are then all wrapped in a line div. And all three are wrapped in your original element (h1 in this case). adding a class to each line and adding a line with incremented values: .line1, .line2, and etc? Yes - line++ adds a number to the lines. <-- get all the line classes we generated above? Yes - the querySelector is selecting the lines generated above so we can get a count for the loop because that will vary depending on screen size. Shouldn't just the .line(1) be enough to target? If you only target .line1 and .line2 etc.. then you will get a whole line animation. In this case it looked like you wanted the individual characters to animate on each line, but all lines needed to start at the same time. So we target all the child divs in each .line div to stagger. Each character is in its own div nested in the .line div. A good way to see what's happening under the hood is to inspect an element after you split it into chars, words and lines. It's quite powerful as you can loop through any of those splits and do some really creative things. Just to be clear, normally you'll probably just animate the split.chars or split.words etc... but this was a case of needing all the lines to start animating at the same time so we make multiple stagger tweens out of the split. Does all that make sense? Happy tweening.

That's because GSAP is stronger than CSS and it will beat up all CSS transitions. ? I think if you limit the CSS transition to background only, you should see the desired results. transition: .8s background ease-out Of course, you can always use GSAP for the hovers too and prevent all potential conflicts. Hopefully that helps.

Hi @harp30 Thanks for joining Club GreenSock. I'm not sure how that website is splitting the text, but you can easily accomplish the same thing with SplitText. In answer to your questions: 1. You can make sure your words don't break incorrectly by splitting by words and/or lines in addition to characters. 2. Your revert wasn't working because your were trying to revert() introSplitText, but the variable name should be introSplitText_Heading. If I'm looking at the correct animation on that website, it looks like you want all the lines of the text to animate at the same time, right? If that's the case, I think an easy way to make it happen would be to split the text into lines and characters. Then loop through the lines and create the stagger for all the character divs in each line. Maybe something like this. The SplitText docs are quite extensive and loaded with more detailed information. https://greensock.com/docs/Utilities/SplitText Also check out the SplitText collection on CodePen https://codepen.io/collection/KiEhr/ Hopefully that helps a bit. Happy tweening and welcome to Club GreenSock.

Hi PointC. Thanks for clearing that out. I am positive I won't forget this. Very much appreciated!

I will be always amaze how lively GSAP is. I started with your product while I was an early ActionScript student. Long life to GSAP ❤️

For the record, you may find that loading TweenMax may actually be FASTER (even though it's technically bigger than TweenLite + CSSPlugin). It's common for people to get way too focused on sheer kb and miss a bunch of other factors like the number of requests, latency, ubiquitous caching, etc. See https://greensock.com/kilobyte-conundrum for more thoughts.

Sorry, I can't seem to replicate line one going onto 2 lines. Can you provide a demo that shows the split not working properly? The demo does not even need to contain any animation, we just need to see text that isn't being split to your expectation. thanks!

No, that isn't something that reverse() allows. My suggestion would be to create a new timeline each time you play() from the beginning or reverse() from the end.

Hi Plastois, Welcome to the GreenSock forums. Glad to see that you are doing so well with GSAP! I want to commend you on providing such an excellent demo that so clearly illustrated the issue you were facing. Its such a big help! You wouldn't be believe how many there are that don't make the effort. Great job! You already did the hard work of dynamically figuring out the start time and durations based on the positions of your labels. The good news is you can use these values in a single tween without creating a new timeline as long as you add that tween AFTER you have put your other animations in. In the code below I'm using your dynamic values for the duration and position parameter tl.from(".pink", labelTimeEND - labelTimeSTART, {scaleX: 0.001, ease:Linear.easeNone}, labelTimeSTART) I gave the tween a Linear ease just so that its easier to see that it ends exactly when it should. ---- As for your second question 2) I set delay equal to "labelTimeSTART" time but it start before previous animation ends. Why? It seems that the delay that you set on the timeline "appears" to be ignored when you dynamically changed the duration of tl2 var tl2 = new TimelineLite({ delay: labelTimeSTART //4.1 }); tl2 .from(".pink", 10, {scaleX: 0.001}) .duration( labelTimeEND - labelTimeSTART ); in your example if you remove the duration() line the delay works fine. I will look to see if this is a bug, or just a side-effect due to necessary logic in the engine. Thanks again for the awesome demo, and welcome aboard! Let us know if you need any more help with this.

Hi @Carl, Thank you. Have a nice Day and a coffee ... Best regards Mikel

in addition to Mikel's excellent advice we also have MorphSVG which is the most elegant solution for any svg morphing. You can morph a circle into a hippo then into a star with only 3 lines of code. although the main use of MorphSVG is to morph between shapes that have been drawn in a program like Sketch or Illustrator, you could do some pretty crazy things by dynamically generating paths with random points and morphing between them. You can learn more about MorphSVG here: https://greensock.com/morphSVG

Hi @DjKarimi, There are 12 lines of code, and it's effortless and fast. + the libary. You can also do it with the GreenSock AttrPlugin - for example: Does this help? Mikel

Just to add a little more clarity, when a property has a CSS transition applied, ANY change to that property will be delayed by the browser and gradually applied according to the duration you set on the CSS transition. So let's say you've got a 1-second CSS transition applied on an element and then you do a GSAP opacity tween from 0-1 with a duration of 0.5 seconds. Well, GSAP sets the value on every tick (60 times per second) and every single time, the browser says "oh, I'm not gonna show that right away...since there's a CSS transition applied, I'm gonna take a whole second to gradually make that change that GSAP just applied." So your 0.5-second GSAP tween looks weird and takes a lot longer (1.5 seconds in this case) because the CSS transitions are getting in the way. I hope that helps explain what was going on under the hood and why it's generally not a good idea to mix JS animations with CSS ones. Happy tweening!

in fact I did not even know that there was a way to put the transiton only for certain attribute of style. By these and others I speak, living and learning, and learning from the best (GSAP Moderators). ❤️ Thank you for the explanation

Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.

Hello everyone, i just started using the Club Greensock Plugins with Nuxt.js and quickly faced the problem of importing them using the ES6 import syntax. I have tried multiple methods to get it working, but all i get is the error "Cannot read property 'middleware' of undefined" after importing it in my component with "import 'gsap/DrawSVGPlugin'". Importing TimelineMax works. The same happens when using a private git repo like described here: All the files from the Club Download's "bonus-files-for-npm-users" folder are in the root of the gsap package downloaded from npm, with a custom package.json like described in the post above. Thanks in advance

Hi Carl, Perfect, thank you! You were quite spot on about what was occuring despite me not giving you much info to work with. After watching that video it makes perfect sense, I didn't know about immediateRender and setting it to false in this scenario has worked. Thanks for all of your other efforts on this message board, I've learnt a tonne from your other posts. Cheers, Paul

Hi @dennisvg I wrote up a little info about AI exports for SVG that you may find useful. Happy tweening.

1) Nope, I don't see the double-transforms in the codepen demo. 2) That's a tricky one. SVG coordinates can be affected in many ways. For example, a <rect> element can be placed by simply using "x" and "y" attributes OR it could use the "transform" attribute OR it could use CSS transforms. And for a <circle>, it could use "cx" and "cy" attributes. I'm not sure exactly what Adobe Illustrator does under the hood in every scenario. I thought that most of the time it uses the "transform" attribute but actually I think there are various options when you export so that it might use attributes or it might use CSS values based on whatever you select. But yeah, it shouldn't really matter as long as you're using the latest version of GSAP. Glad you're enjoying the forums!

We're eager to help, @harp30, but it's SUPER difficult without being able to see (and poke around with) a reduced test case. Can you provide something online, even if it's not codepen? The only thing I can guess is if your local environment is somehow having the page render at a bigger (or smaller) size initially, and then it resizes after the split. That'd be kinda weird, of course, and probably isn't the case. But I'm at a loss without being able to see something.

If I understand what you're saying, everything is working correctly in your demos on CodePen, right? But when you try the same thing in your local test environment, you're not getting the correct number of lines. Is that accurate? I can't really dig through entire projects, but we can try a little test. Let's forget all about the animations for a minute and try some simple test splits. Please try the code from this pen in your local environment. Resize it a few times and click the button. Are you getting the correct number of lines each time?

I see you didn't add 'words' to your split in the CodePen project as I recommended. Have you tried adding words to the split in your local project? Are you using the latest version of TweenMax and the SplitText plugin in your local project?

That's awesome, @psntrtr! Love hearing from ex-ActionScripters. Thanks for sticking with us for so long. Here's to another 10 years (at least)!

I looked again and that page does load 2 different versions of GSAP. One is in a <div> (2.0.1) and the other is right before the closing </body> tag (1.19.0), in this: <script type='text/javascript' src='http://grip.studioinherent.com/wp-content/themes/semplice4/assets/js/frontend.min.js?ver=4.0.9'></script> Ideally, that theme wouldn't mash all the GSAP code into their minified file, but perhaps you don't have control over that. You could try to segregate that by setting window.GreenSockGlobals = {}; AFTER your 2.0.1 <script> tag so that when it gets to the 1.19.0 stuff, it dumps it in there rather than overwriting anything. But of course ideally you wouldn't be loading 2 different versions in the first place (a waste of kb).

Thanks for the demo. It took a good 30 minutes for me to figure out what all the code was doing. Unfortunately for something with this level of complexity it would probably take a few hours to try to understand it fully and re-work the code to a place where maybe it would work as you expect. Although, its pretty cool how you were able to get so much functionality into one Draggable.create(), I'm struggling to figure out how to effectively add in some level of updating the bounds of one of the elements based on the size of the others. This isn't too say you're doing anything wrong, I just think I'd take a different approach and it would probably take quite awhile to even see if it would work. Perhaps someone else can take a stab at it. Often times others see solutions that I don't. And like you suggested perhaps there is something in the API that could handle this or be added to handle it.

Thank you very much for the very fast and detail answer. Very clear! I just wanted to avoid loading to much extra library. But as it is on cloudfare I guess I can simply go with the two libraries. Again thank you very much!

You are a savior You just made my day, thank you so much

Got it @PointC, thanks for clearing that up!

hi @kkarimi91@yahoo.com; do you want such an effect: Happy masking and tweening ... Mikel

God, that didn't ever occur to me to use the ternary operator. That was also useful to use on the duration value as well on a different timeline. Thanks ever so much. Paul

Nah, there's no need to re-do the entire function and have all that repetitive code in there. You could just put a simple ternary operator in there: //OLD: ... "-=.85" //NEW: ... (window.innerWidth < 737 ? "-=.5" : "-=.85") Is that what you're looking for? Another option is to use an object for various values that are dependent on the window size, like: var config = {}; if (window.innerWidth > 737) { config.position = "-=.85"; // add whatever you want. } else { config.position = "-=.5"; // add whatever you want. } tl.to(..., config.position); Hope that helps.

The default behavior for a timeline is to run the tweens in succession. By adding the position parameter you can alter the start times of the tweens. Either with a label, relative time or absolute time. https://greensock.com/position-parameter If you had a collection of tweens that were not part of a timeline, they would all start at the same time (0) provided none of them had a delay or was put into a paused state. Hopefully that helps. Happy tweening.

Hi @jiggles78 , Welcome to the GreenSock Forum. Your idea is great. To use this slider code, you could do it like this (only a quick approach!): The wonderfull construct of @OSUblake, each Slide triggers a separate animation, is also feasible. Happy tweening ... Mikel

your demo had a lot of code I didn't understand especially relating to the 2 different Draggables that were being enabled and disabled. The biggest problem seemed to be in the selector you were using for Draggable too var drag = $('body .jacket-image .active svg'); Not sure why the selector needs to be that complicated but it appears its trying to select the entire svg. Since the SVG includes the patch and the jacket image I think its better just to select the patch so I gave the patch a clear id of "patch". I got rid of all the code that was not related to keeping the patch draggable within the bounds of the back of the jacket and this seems to work. var R = Draggable.create( "#patch", { type: "x,y", bounds:{minX:-100, maxX:80, minY:-50, maxY:200}});

Wow. That's awesome, Sahil. Perhaps this could be used in your next video. Also, those examples from the HTML Animation are awesome. It's like the first year of @OSUblake School in one place and you can save thousands off admission!

Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation For better performance you can use opaque canvas.

The webpack issue with Scrollmagic is a pretty easy fix, but that obviously hasn't happened. Scrollmagic hasn't been updated in 2 years. That would worry me. You need to tell webpack not to use the AMD syntax Scrollmagic has listed first by using the imports-loader. You don't put the libraries you want to import inside your webpack config. And you don't need to alias GSAP. So your webpack config could be something like this. resolve: { .... alias: { "ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap" } }, ... module: { rules: [ .... { test: /\.js$/, loader: "imports-loader?define=>false" }, ], }, .... Now try importing like this in your component. import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import 'ScrollMagicGSAP' // or maybe like this... import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' const ScrollMagic = require('scrollmagic') require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')

Hi @peacepostman, Looks like you're using some code from this Paper.js example. To animate sine waves, you can use a Sine.easeInOut ease along with some other optional eases. Check out this post... https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401 But rendering stuff with SVG can be slow. Canvas drawing commands are hardware accelerated, so that might be a better option. Check out this version. You can add as many waves as you want, and even animate stuff like the height and amplitude of each wave. Sine is cyclic going from -1 to 1, so that's what I'm using for the y-value in my points. And check out the wave resizing. It's throttled by the ticker.

I didn't have time to dig into all the code in detail, but it looks like you're trying to animate the attributes of <stop> elements, right? Thus you should use the AttrPlugin (meaning your tween would use attr:{"stop-color":"#ff0000"} for example). Does that help at all?

Thanks a bunch! Wow...i can't believe i missed that... Ok, gonna try to work with that on a larger scale! Thanks again!

Hi. I ran into this same issue. The SVG is not "malformed", but it is in the eyes of Google. The validator does not catch it either. They did apologize to me and said they would add it to their online banner guide. Jonathan was on the right track. You need both the xmlns and xmlns:xlink in your tag. This "should" be valid: <svg width="128" height="45" baseProfile="full" version="1.1"> This is what they are looking for (add the "xmlns" and "xmlns:xlink"): <svg width="128" height="45" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> I hope that DCM updates their tool to be a little more descriptive when it comes to errors.