Leaderboard

It's kinda tough to troubleshoot blind, but from what I can tell it seems like you're constantly reusing and populating the same "tl" (which I assume is a TimelineLite or TimelineMax). That's probably not a good idea, at least the way you're doing it. Remember, the playhead will keep moving forward in that timeline until it reaches the end, and then it'll stop. It looks like you're hard-coding positions where you're inserting tweens on hover/out, so what happens if the playhead is at 1.5 seconds and you insert a new tween at a time of 1? See the problem? It'll instantly set that new tween as if it was at 0.5 seconds. I'm not entirely sure what effect you're going for, but you could either: Just create your timeline initially paused (but populated with the tweens), and then on hover play() it, and on hoverOff reverse() it. Or recreate a new timeline instance each time you hover/out. Don't worry, the instances will automatically garbage collect. And GSAP is very fast, so you shouldn't have to worry about some huge cost to instantiating a new instance. If you're still having trouble, it'd be great to see a reduced test case in codepen so that we can see what's going on. Happy tweening!

It sounds like you were expecting scale values to be relative and somehow build (combine) on top of each other rather than being absolute. If we did it that way, it'd lead to a lot of confusion. Ultimately you had things with a scaleX (or scaleY) of -1 and you were expecting that tweening to a value of 0.5, for example, would actually make it automatically go to -0.5 or maybe 0.5 * whatever the current value is, right? As for lots of extra code, that function I provided was meant to be reused as much as you want, so it should be very simple and concise. Let me know if you need any help with it, though. I realize you've got things working now, so that's great. And I sure appreciate the kind words at the end of your post. We really try to serve people well in these forums and it's nice to hear when folks like you notice the efforts. Happy tweening!

Lots of possibilities. Simplest solution, flip your images, scale a wrapper.

o.k. - I managed to break it in CodePen. If you remove or comment out this line in iOS, the clip-path works correctly. <base href="https://devsaver.com/"> I'm not sure why, but that is the problem child. Try it for yourself here.

Yeah, I'm still having a really hard time understanding why you think this is a bug (I see no evidence of that), but I'm glad you @OSUblake delivered a solution for your scenario that works well. Scaling a parent is probably easiest, as he suggested. If I understand your goal properly, you could also do something like: function scaleBy(element, factor) { var t = element._gsTransform; TweenMax.to(element, 2, {scaleX:t.scaleX * factor, scaleY:t.scaleY * factor}); } //usage: scaleBy(element, 0.5); That way, it doesn't matter if the current scale is positive or negative. Oh, and that code assumes you've set() your transforms initially (otherwise, there won't be a _gsTransform on the element yet). Happy tweening!

Aargh, you did in 40 mins what i've been trying to do for DAYS.... and with canvas Thank you for the examples, that will really help. Thanks @OSUblake

Did you see this? If you want to keep scaleX(-1) in your CSS, then you'll also need to set scaleY to 1, and rotation to 0. Same matrix, different results.

You can inject the SVG. We've had a few discussions about it. Here are a couple threads that should help. Happy tweening.

Nope, sorry mate. Still not seeing it. I'm looking on a Mac 10.13.4 and Safari 11.1 Nothing remotely like what you describing happening here. Maybe your graphics card is being funny? Do you think you could check on another Mac on your end?

You can make sure that DrawSVG (or any other plugin) is loaded. @Carl has a good post about that here: Happy tweening.

It appears you posted a demo from Sarah Drasner. I'm sure that was just and accident. No worries. Please post a simplified demo with just enough svg code and js to illustrate the issue. From your description one path and one tween should be sufficient. I'm having a hard time understanding what you mean by "the path is thrown" but i'm confident a demo will clear it up.

I'm glad you have a solution and it's working for you now. Happy tweening.

One more pen for the concept. I animated the size of the parent container so you can see how it works responsively without having to resize the window.

I was on a mission to win 7 days straight, had to give up all hopes when I saw Blake online today. Looks like I will have to start over again someday. Still 2 more to go, if anybody has 10 questions please post them today when none of mods are online.

Your solution (#2) works! beau.haus thanks so much!

Yep - we add 'GreenSock Moderator Magic' to all forked pens. The only change I made to your pen was adding the missing scripts when I forked it. I didn't touch the HTML at all so I'm not sure why you're seeing a difference in the SVG. I'm glad to hear it's working locally now. Happy tweening.

Oh, sorry, I wasn't talking about checking for things on CodePen. I meant that you could use Carl's technique to check for the plugins locally since you said the animation wasn't working in your local development environment. Happy tweening.

Your pen was just missing jQuery, TweenMax and the DrawSVG plugin. Happy tweening.

Here is the fix. in the index.html file you need to add "muted" to the video tag. <div id="video-container-0"> <video muted id="video-0"> If you want to play video with sound when the user interacts you need to turn off muted in JS creative.dom.video0.vid.play(); creative.dom.video0.vid.volume = 1.0; creative.dom.video0.vid.muted=false; Then you need to calm down your client and properly blame Google for updating Chrome and not letting their ad platform alert their users.

Like @Carl, I'm pretty confused by the question (particularly the "thrown" part), but I did notice that your <path> has multiple "M" commands in it which means that it's not one continuous line. That probably won't work very well with a drawSVG effect because the entire effect relies on animating the stroke-dashOffset. In a case like yours, I'd strongly recommend breaking that one <path> into one for each "M" command (segment) so that you can animate them independently. For example, in your case: <path class="" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M412.2,123.8c-6.7,1.9-12,6.5-18,9.7c-8.9,4.7-17.4,10.2-26.1,15.3c-2.4,1.4-4.6,1.4-7.2-0.5 c-16-11.7-32.3-23.1-48.4-34.7c-3.5-2.5-3.2-5.5,0.5-8.2c5.1-3.6,10.9-5.8,16.4-8.6c13.9-7.1,27.9-14.3,41.7-21.6 c3.3-1.7,5.7-1.7,8.1,1.3c7.8,9.9,15.8,19.6,23.8,29.4c2.1,2.5,3.9,5.4,6.2,7.6C412.6,116.5,414,119.7,412.2,123.8L412.2,123.8z"> <path class="" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M322.1,110.1c12.7,9.3,25.1,18.3,37.4,27.5c4,3,7.2,3,11.6,0.1c8.8-5.8,18.2-10.8,27.4-15.9c4.9-2.7,5-3.3,1.5-7.6 c-8-9.8-16-19.5-23.8-29.4c-1.3-1.7-2.1-2-3.9-1c-3.6,2.1-7.4,4.1-11.2,6.1C348.3,96.6,334.9,102.3,322.1,110.1z"/> Does that help?

Just confirmed with google. This is a problem with Chrome. Particularly the update occur on the latest Chrome browser Version 66.0.3. Working to see if there is a fix soon.

Great job, Craig!

I too cannot reproduce it at all. Safari has an issue with fixed positioned elements and rendering context. You would have to create an explicity rendering context to the said fixed element to make sure it would be placed on the correct z depth. Although I don't think this is the case. I did find that you are setting up a few too many timelines that could be removed and you seem to be tweening the elements to their natural colour, maybe you want to get rid of that bit and tween them FROM whatever colour you want them. Maybe that'll help? As @GreenSock said, it's probably nothing to do with GSAP.

incredibly helpful... I'll try to work on a test case and post it. Many thanks!

Doesn't really solve my 'problem' of doing what should be simple: setting an image to scale a little bit (which works flawlessly with 1 line of code) and then doing the exact same thing to an image that has been flipped using css. Every solution involves adding extra code to make the flipped image behave properly: canvas, set(), parent container, helper func, even my solution of scaling W&H adds in undesired extra code to make it work as intended, reducing the dynamic flexibility & minimalistic code I was hoping to achieve. I greatly appreciate the speed of which both Admin & Mod have responded to my questions & multiple solutions provided all do work as desired. I hope this thread can help someone else in the future who is also stuck wondering why their simple flipped image is not behaving as expected when scaled. EDIT: I do understand there are situations where flipping during animation is actually desired & it works great for that! Thanks again GreenSock - you guys rock!

Hm, I can't reproduce that at all. Doesn't sound like it's related to GSAP at all. Maybe try rotating your button very slightly, like 0.1 degree? You might even need to animate that to force the browser to update on each tick. Maybe try setting a transparent border? Just taking stabs in the dark here.

Hi, Seems we got to the bottom of this thanks a lot guys! Instead of removing the <base href="" ( not quite possible without a lot of pain for the rest of the site ) we changed the clip path: <g class="clipPathReveal3" clip-path="url(#theClipPath3)"> changed to <g class="clipPathReveal3" clip-path="url('/php-web-content-management-system/#theClipPath3')"> Cheers!

hmmmm... I do see that on iOS in your new link, but here is the exact same SVG in a CodePen. ( I pulled it straight from your site) In my demo, the clip-path seems to be working correctly and looks fine to me in iOS. The only difference is that the demo SVG isn't being influenced by any parent and/or CSS from the main site. There has to be something interfering somewhere that iOS doesn't like. It's a bit cumbersome to debug a live site though. Maybe try turning off the style-sheet or temporarily move the SVG out of its parent containers to see if that makes a difference.

You're talking about those same three logos with the glasses? I'm not sure what's happening on your actual website, but on Chrome the glasses animation is already complete by the time I scroll down to them. I'm not sure about iOS specific problems, but clip-path should work. I pulled one of your logos off the site and dropped it into a CodePen. This seems to work fine in all browsers/OS for me. Maybe others see something different? Happy tweening.

Nice now I'm going to have to steal it.

Here's a second run at this with @OSUblake's invaluable assistance moving the resize calculations into an event handler outside of the modifiers. I realized, dufus that I am, that the original had a whole bunch of extra calculations of the object's size that were unnecessary all you had to do was calculate the parent's size. So here's my revised effort for Responsive Transforms Based on Parent ( in this case the Window). Note I added in the divide by 100 in the function to allow for the tween x and y to treat 100 as 100% percent of the parent/window size. Otherwise 1 would represent 100%. It can certainly be removed to reduce the calculations if you want to work with values of 0-1 instead of 0-100.

I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids.

Wow, Blake. Great demo! That does a great job of showing off the curviness property. Contrast that to the one from which it was forked. UPDATE: I added a fork of Blake's version with a field for setting curviness and a reset button for the bezier.

Nice question. I have had similar question but never bothered too much about it because it works. I will try to explain with what I know. JavaScript runs in a single thread so it will execute all statements before rendering/updating the page. So let's say on click event you are executing a function, JavaScript will execute all the statements before rendering the layout. In following demo you can see a there is a loop that executes 10 times it executes 20 statements of TweenMax and many more that you don't see from library. In console you can see that it takes about 2-8 miliseconds to execute the loop, it can vary depending from system to system. Once all statements are executed then browser will update the layout with any changes that occurred. Now for your animation to run at 60FPS browser must update any changes every 16 milliseconds so if you are doing a lot of animations that take more than 16ms, it will start degrading the performance by dropping the frames because JavaScript is busy executing other stuff. In demo, If you change the count to something like 5000, you will see that it takes browser about 1500ms to execute the loop. If you log the performance of the page using devtools you can see that for that time browser never rendered anything so no question of seeing jumps, just horrible user experience. Interestingly, just today a video was published about whole JavaScript event loop that talks in detail how JavaScript is executed, I haven't seen the video yet but it will be worth watching. You will find a lot more videos on that channel about everything in details. An article that talks about rendering and performance in details, https://developers.google.com/web/fundamentals/performance/rendering/ Another article worth reading that talks about how different scrolling methods affect the performance https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97 Another thing is how animating certain properties affects the layout, for example if you animate left, top, height or width it will trigger the layout and browser will have to recalculate entire page. While animating transforms won't cause layout trigger in most browsers. On following page you will find list of browsers and what property triggers what, so you want to avoid those triggers wherever possible for better performance. https://csstriggers.com/ About how animations work, at core GSAP just calculates over time with different easing formulas and set those values on the element. So basically you can animate numbers of any object, that's why it is very easy to use GSAP to animate different libraries like Three.js, PIXI js etc. GSAP uses the requestAnimationFrame function which makes sure everything animates at constant frame rate given that you don't animate too many pixels at once. Following is simple demo of how you can ease using simple Math, But of course GSAP does a lot more than simple easing, it makes sure that your animations execute at exact duration that you set and a lot of other work to work around different browser inconsistencies.

Great demo, Sahil!

Hi celli if i understand you correctly ; pls try this : var offset= $("#top").offset().top; $("#visionaries").click(function() { TweenLite.to(window, 1,{scrollTo:{y:offset}}); }); and pls read the ScrollToPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/ edit : ( oops.... , Jack already answered )

You were just tweening the wrong thing. I think you meant: TweenLite.to(window, 1, {scrollTo:{y:$("#top").offset().top}}); Your tween was literally just tweening the #top div itself to its own maximum value (like if it had a bunch of content inside of it, scroll to its bottom).

Hi potatoDie you can change the transformOrigin with this : TweenMax.set(element,{transformOrigin:"50% 50%"}); pls read the CSSplugin Docs : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ http://codepen.io/MAW/pen/MYyzpv

Hi Cople try this : animation.vars.onComplete = tweenCompleteHandler;