Leaderboard

Hi and welcome to the GreenSock forums, Thanks for the demo, it looks very nice, but for practical purposes when it comes to support it really helps to have a demo that is as simple as possible. Not sure where in 78 seconds of animation you want a pause without digging through a bunch of code and figuring out which elements are which. Check out addPause() https://greensock.com/docs/TimelineLite/addPause() You should be able to drop that into any timeline wherever you want and the timeline will pause. If you still need help, please fork your demo and remove everything except 2 or 3 tweens so that we can help you as efficiently and as effectively as possible. Thanks!

Thought I'd post this for anyone wanting to get good browser and webstats. https://analytics.usa.gov There's lots of sites that do this but the US gov one should be unbiased and cut across all consumer and business demographics, and it's sample is huge so statistically it should be dead on. It's also significantly North American centric but still has a reasonable global sample as well.

If you've got a scroll-based animation that's affecting the "y", couldn't you just do one of these?: 1) Adjust whatever value that the scroll is reporting so that it's reduced beyond a certain point? For example, let's say it's supposed to kinda "resist" once scrollTop is 1000, you cut the values beyond that in half (or whatever). In other words if (scrollTop > 1000) { scrollTop = 1000 + (scrollTop - 1000) * 0.5; } ... 2) Or add another tween AFTER the 1000 point that continues your "y" tween but at half the rate so that scrolling further seems to slow it down. ? I'm not very familiar with ScrollMagic or how difficult it might be to implement either of these, but hopefully it's not too bad.

Here's a demo should be fairly easy to then add tweens when hovering each individual sphere.

Because it is a simple tween it runs immediately and the mouse events are ready before you want them to be. If you add them instead as a function to the master timeline at the appropriate point they are not active until after your initial animation runs.

Sure, we'd be happy to help, @galahad9gr. Yes, the gsap.jquery plugin is a jQuery plugin, so that'd require jQuery of course. However, GSAP itself has no dependencies whatsoever. I wonder if maybe you were trying to use gsap.jquery without jQuery and that'd certainly be problematic. To convert jQuery.animate() calls into GSAP's syntax, it's basically like this: //jQuery $(".selector").animate({cssProperty:"value1", otherCSSProperty:"value2"}, durationInMilliseconds, onCompleteFunc); //GSAP TweenMax.to(".selector", durationInSeconds, {cssProperty:"value1", otherCSSProperty:"value2", onComplete:onCompleteFunc}); Of course GSAP has a much more diverse API for animation, so the above is probably an oversimplification, but it should cover most cases. Remember, duration is in seconds for GSAP, milliseconds for jQuery. EXAMPLE: //jQuery $(".myClass").animate({top:"100px", left:"200px"}, 5000, myFunc); //GSAP TweenMax(".myClass", 5, {top:"100px", left:"200px", onComplete:myFunc}); I'd highly recommend watching the video at https://greensock.com/get-started-js/ to get familiar with the syntax. And of course the docs are at https://greensock.com/docs. More learning resources: https://greensock.com/learning Happy tweening!

I think I understand what you're looking for now, and that's beyond what we typically provide in these forums - it's not really a GSAP-related question at all. You'd need to do some math to figure out how to move the transformOrigin while also converting the transforms seamlessly so that there's no jump, kinda like what our smoothOrigin feature does for SVG elements. It's entirely possible, but not simple. You may need to hire someone to help with that since it'll take some work to iron out all the details. GSAP doesn't provide a magic bullet for that type of thing, sorry.

Hello @dobrawa and Welcome to the GreenSock Forum! Here is a fork of your codepen using GSAP version 1.20.4 as @GreenSock's Jack Advised resolving your issue: Happy Tweening!

Short answer: update to GSAP 1.20.4. Explanation: in order for GSAP to animate a property, it must get the CURRENT value first (and then interpolate between the current and destination values). Transforms are trickier than any other property because (for CSS at least) the browser returns computed values in a matrix() or matrix3d() and then GSAP must decompose that into all the component values (x, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, etc.) It’s been able to do that for years…. ...The problem here is that SVGs allow for unlimited strings inside the “transform” attribute and unlike CSS, there are sometimes rotate() values that are very unique in that they contain the axis of rotation data inside that string. GSAP could interpret translate(), scale() and even matrix() values inside that transform attribute…but rotate() was such a unique beast and would require a lot of extra code to accommodate…or so I thought. I came across a way to force the browser to press them all together into a matrix for me, and I put that into GSAP 1.20.4. In summary, until GSAP 1.20.4, it couldn’t understand the “rotate()” commands in SVG transform attributes. You were using those. It’s actually pretty uncommon because most editors simply use matrix() or sometimes translate(). But you didn’t do anything “wrong” and it’s a moot point now The other option, of course, is to remove the rotate() values in the transforms (you could apply the same effect via a matrix()), but it's probably much easier to just update to GSAP 1.20.4. Happy tweening!

Thanks for sharing. Oh how the mighty IE has fallen!

Hello @Lasercode and Welcome to the GreenSock forum! Try this example. I edited my previous codepen. Chrome has a habit of changing the way the syntax for CSS gradients are done since the CSS spec ins't written in stone yet. Chrome requires the -webkit prefix to work properly. Now webkit based browser like Chrome want backgroundImage (background-image) but non webkit browsers accept the background shorthand syntax. This one does it without the check if the browser is Chrome or not. having webkit and non webkit syntax in one tween set(): And this one does it with a check if Chrome or not (older way) : Happy Tweening

Hi @Artsx, Sorry I think I was blind yesterday and didn't really realize overlay was animating to right with slight rotation. I hope I didn't sound unwelcoming, hope you enjoy using GSAP and your time on forum. Feel free to post your queries, we would be happy to help. Just small update, in previous demo I was rotating overlay but a more reliable approach would be to animate skew, it is reliable because it will work with almost all dimensions.

Point C and Sahil have almost made it a competition.

Hi @Tofa_101 Welcome to the forum. I think you had the right idea in your demo, but the onComplete was added to the short autoAlpha tween rather than the master timeline. In addition to what @Visual-Q did for you, you can use onComplete as well if you add it to your master timeline. Something like this: In answer to your other question about checking a timeline - yes there are many ways of checking how far along a timeline has played. The most common you'll probably use is progress(). Please check out the progress() method here: https://greensock.com/docs/TimelineMax/progress() In addition, you can check if certain things are animating (& prevent mouse enter/leave events etc) by using the isActive() and isTweenIng() methods. https://greensock.com/docs/TimelineMax/isActive() https://greensock.com/docs/TweenMax/static.isTweening() Hopefully that helps. Happy tweening and welcome aboard.

Hi @babacar, Welcome to the forum. It's difficult to understand the desired result you'd like for your project. I'm not sure what 'start from left and disappear to left' means exactly? If you use the search feature of the forum (upper right on the menu) and type 'slider' or 'slideshow' for your search terms, you'll find quite a few threads with excellent examples that can help get you started. As far as your specific questions, you'd really need to provide a demo so everyone can better understand what you're trying to do. It doesn't need to be anything fancy. Actually, the simpler the better. Maybe use three pictures or even just a few plain colored divs as placeholders. Try to demonstrate what you'd like to happen so that we may better assist you. Please review this post to see about making a demo. Once you have a working demo, please post it back here with GSAP specific questions and the community should be able to point you in the right direction. Happy tweening.

Here is how you can do it, but there are some limitations to clip property. Your image must be positioned absolutely, otherwise you will need to use canvas.

Just to clarify what was happening... SVG elements can have transforms applied in 2 completely different ways - via CSS or via the "transform" attribute. In old versions of GSAP (before 1.19.x I believe), GSAP would default to using CSS (inline) for most browsers, but since Firefox had some bugs/quirks with that, we applied them via the transform attribute in that case. However, we later discovered more and more browser differences/quirks with CSS, so we defaulted everything to the "transform" attribute instead (it delivered more predictable results, and it was always baked into the SVG spec, so it seemed safest). You were actually loading 2 completely different versions of TweenMax (1.20.3, then 1.18.0). The old version was loaded last, so it trumped the other. So in Chrome, it was applying transforms via CSS, thus it overruled your class css that you had set up. However, in Firefox, it was being applied via the transform attribute, but you ALSO had that CSS rule applied, thus the browser had TWO completely different values to apply, and it had to decide which to prioritize. Oddly, some browsers prioritize CSS over the transform attribute, others flip that. Annoying, I know. So that's why it started working when you removed the CSS rules - there was no longer a conflict. This is one of the reasons we recommend that folks always apply transform-related values directly via GSAP instead of mixing CSS, GSAP, and the "transform" attribute. If you let GSAP do the heavy lifting for you, it'll deliver better browser compatibility, plus it'll be a bit faster as well. Happy tweening!

Also, the codepen I provided above already had that functionality. I changed a couple values (the transform-origins of the elements on the left) and now it has two circles of different sizes. @lisartur I'll help you understand the logic of the codepen if you'd like, but as @GreenSock said I won't be able to provide more code examples. Hopefully once you understand how the code works you'll be able to expand it further to add the extra functionality you need. Please first try to read and understand what I posted and if you need guidance to understand specific points you can ask here. (Unless Jack would rather this moves to PMs – I'm fine with either.)

Not that it was the cause of the problems in this case, but there is an extra group closing </g> at the end and no whitespace between two attributes on the first line. You can always drop your SVG into a cleanup tool like SVGOMG to double check for errors like that. https://jakearchibald.github.io/svgomg/ Happy tweening.

Sometimes things really do change for the better. This is a particularly good site for showing clients why you're not going to support legacy browsers.

I think you would be missing out on some of the simplicity that a single timeline would afford. Here is a quick example of a single timeline that loops and repeats, along with pause on any "item" hover and scaling that item up on hover, scaling back down on mouse out. ***EDIT***: I see that you are saying scale up 1/3 of the way through the animation. I don't know why I was misreading that as scale up 1/3 (in size) while hovering. My mistake.

I was going to say, because babacar will need to iterate over every picture anyway to add the scale animation. However one other thing I forgot about is that the whole group must stop moving when hovering over any of the element. It would be annoying to have to pause all of the individual tweens... So, I think there should probably be a combination of both, maybe with the two timelines idea I mentioned above. I'll make a quick demo.

OK, no problem (if I understand correctly). So the trick here is to duplicate the entire group and append it to the DOM. Then you can tween the entire group to move half the distance of the width of the entire group (i.e. the width of the original non-cloned group) and set the tween to repeat infinitely. Here is a rudimentary example of this. I have not accounted for spacing and container widths with respect to viewport etc. But, the top shows a row of squares moving left of the screen and then repeating when all are off the screen. The second row is constructed (in HTML) and styled (width CSS) identical to the first row ... I've just used a single line of jQuery to clone the items in the row and append them to the existing square's parent. And then with its tween, simply set it to move half of its width before repeating itself ... giving the illusion of moving and repeating infinitely.

Hello @Sahil, Thx a lot for your help, no problem for yesterday, you made my day with your help !

looks like my CSS is causing the problem, i removed them and use js to set the position instead and it is working now. Thank you so much really appreciate you guys looking into this, its been very helpful. Thanks again Carl, thanks Sahil.

Hi @InTheOne Welcome to the forum. You're just missing the ScrollMagic GSAP plugin: <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> That plugin allows ScrollMagic to hijack the tweens and timelines. More info: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening and welcome aboard.

Ohk, here is one last attempt.

Taking advantage of the topic I remembered from this example here, which is a bit more complete: http://www.espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017#!athletes_uswomensnationalhockeyteam

Hi @Sagi Karni Welcome to the forum. If I understand your question correctly, you want the draggable element to reveal just a small section of the underlying image? If it were me, I'd use a SVG so it scales nicely and then use a clip-path. Something like this maybe: I used a second copy of the image with a 25% opacity just so it's easier to see what's happening. Hopefully that helps. Happy tweening.

Nice job, @Acccent. I hadn't noticed that you delivered a solution like that (without even needing the math). I guess I had in mind something that'd dynamically adjust its transform origin from/to anywhere seamlessly but that'd definitely be more complicated. I like your clever approach on this one...hopefully it'll give @lisartur what's desired. It may not, though, if the proportions are different, but this is at least a good starting point. Thanks again. And no, this doesn't need to move to PMs.

I'm interested in reading why? Perhaps I missed something here that I'm not addressing. If (and this is a big if) the photos are not moving at different relative speeds and are "locked" in with each other, a single Tween moving the group seems to make the most sense. A single tween removes all need to account for relative placements, relative timings, multiple tween controls (when hovering a profile photo, for example), etc.

Hi @Accent, Thank you for your response. I will try that asap and let you know if it's working as expected. Thank you again.

Unfortunately I don't have a windows box to test it on at the moment. I think I saw you had posted on the scrollMajic forum. You might want to fork the pen and add it to your post so people understand the problem. There is a small offset on the trigger to prevent it from being hypersensitive, possibly IE is interpreting this differently from other browsers you could try playing with that number.

I was using NPM and updated the file wrong. I reinstalled version 1.20.4 and then added your fix to node_modules/gsap/Draggable.js: element.addEventListener(_touchEventLookup[type] || type, func, capture); Now it's working great! Thank you so much for your help

Are you sure you used the edited version of Draggable that I referenced? https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Seems like maybe you've got an updated version of one method, but not the other.

I'm assuming you want some kind of kinetic scrolling with a back or elastic ease at the end. The question is... are you planning to scroll the document or actually have scroll control an element. If it's the document you would want to animate the window with the scrollTo plugin. https://greensock.com/ScrollToPlugin Your animation is set up to try and animate the div element itself, in which case see Jack's answer. Also there a is a good discussion with solutions from Blake on a generally related topic here: Here's a mod to an existing pen that quickly demos a back ease with scrollTo and scrollMajic. Note: there needs to be a large enough offset on the trigger to avoid having the backEase's overscroll trigger the next animation.

I don't know what was the issue but the overlay div wasn't getting height as it's parent in Firefox 58.0.2 so I cleaned up your html and moved scripts in Codepen's settings. Trick is to scale up overlay div and set transformOrigin to '100% 100%' i.e. at the bottom right corner and then rotate overlay by 90 degrees. @Artsx I updated demo and added z transform to the background animation and perspective to the parent.

here is the complete demo without the transforms in the css. it looks like the animation is working.

Thanks, Sahil. It looks like the issue is related to the fact that he is using CSS to set transform values on those elements. Note in the CSS panel that I removed the transforms for #CN and #pattern. It causes odd placement of those elements of course but if you roll over the grey circle (which previously had opacity:0) you will see animation

@Carl Not working on windows, version 58.0.2. The element weirdly rotates around and changes it's width and height. Not sure what must be causing it.

Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all

@Visual-QIf you console log reversed state and progress in your second example, you will notice that your statement never executes because progress remains zero. You can get around this by setting reversed property on timeline to true, otherwise timeline will play in reverse for the first time. Note that unlike reversed method, reversed property doesn't reverse entire timeline.

Try to make a demo next time, but you can position the children absolutely. http://codepen.io/osublake/pen/fb80c3038dae04e6575566d25c87b4af?editors=0010 Here's a demo where I animate every flexbox property. All the width and height animations are done using children that are positioned absolutely. http://codepen.io/osublake/pen/dMLQJr?editors=0010