Leaderboard

Yep, @Carl is exactly right. And the reason GSAP doesn't read the percentage-based stuff from the existing CSS is because it's practically impossible since the browser always reports the current style (via getComputedStyle()) as a matrix() or matrix3d() which has everything baked into it. There are no percentages at all. That's another reason why we strongly recommend that folks just use GSAP directly to do their transforms because it's faster, more accurate, and keeps the data segregated properly.

Wait I thought xPercent was equivalent of translate and that GSAP will take in account any prior CSS declarations. But in OP's example I noticed that GSAP would calculate translate in matrix and would reset the position of element using xPercent, so if you resize the element will just get offset from the expected position. So I tried to add translate plus default matrix to css declaration to FORCE gsap to calculate from it's current position and not reposition element in matrix but it behaves same. Personally I would expect GSAP to respect my css declarations because in practical use, I will want my element to stay hidden while scripts are loading. Here is how I would get around it by animating x to zero along with xPercent so I will be able to hide elements using CSS.

You can do something like this ...

You don't have to say sorry, it happens. Feel free to post any questions.

Yep, it sounds like an onUpdate is your best bet. Querying element.style.opacity is probably no slower than creating another proxy element and animating the values simultaneously and checking that object instead. You're doubling the memory in that case, and adding another set of calculations on each tick. I doubt it'd help much, but you could ONLY do the proxy object thing and then inside your onUpdate, that is where you'd apply it to element.style.opacity (just so that there's only one thing animating, the simple proxy object, and you're merely applying that value to the element in the onUpdate. But again, I kinda doubt you're gonna notice much of an improvement with that strategy. Good luck with your experiment.

I think this will work for you

TextPlugin will work too: TextPlugin is available for everyone, its not a Club plugin. You do need to load it in addition to TweenMax https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js more info: https://greensock.com/docs/Plugins/TextPlugin

Thanks Jack. DId not not know about that... will snag!

No no, that code you've got wouldn't work because your 2nd tween overwrites the first one immediately, and you'd never see any animation because you're telling it to animate to scale:1 right away (but it's already scale:1). Looks like you forgot to add the delay special property to that second tween. In other words, you're saying "animate to scale:1.15 and also scale:1 at exactly the same time." (which can't happen of course) If you're still having problems, it'd be SUPER helpful if you posted an actual example, like as a codepen or something so that we can see what's going on under the hood.

Ya I figured that out, I just think it is natural to expect that GSAP will take into consideration if we use percent based translate in CSS. Instead GSAP will calculate current position and add into matrix. But it's not a big issue and can be worked around easily. Plus I can't really think of scenarios where it will cause problems.

ok thank you, sorry

@vinsensei obj will be whatever element/s that you are animating, in his example it is '#circle', check the pen.

That is a fine solution too, Sahil. When you use GSAP to set xPercent and x like: TweenLite.set(something, {x:100, xPercent:-100) it will put the x in a matrix and the xPercent into translate separately. However, if you have a percentage based translation in your css it does not get put into a separate translate style, it all goes into a matrix. Once values go "into the matrix" they have to be pixel based and all sorts of percentage based flexibility will be lost. That's my understanding of what happens, but if you need more clarification on the why, let me know. I'm sure @GreenSock can clarify.

I"m guessing the audio might not be loading the first time you play. I also think its probably better to create the audio object once and then just play() it on each replay of the timeline. In other words there is no need to create a new audio object using the same mp3 every time. when you do that, you don't get the double playback here is the code GSDevTools.create(); var audio = new Audio (); audio.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1672622/badgeDraw_short.mp3"; audio.loop = false; audio.play(); function initAudioPlayer () { audio.play() } //Draw the badge function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); //Splash screen animation// var tl = new TimelineMax(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }) tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } //Control the Hud display with live typing// function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineMax(); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04) return tl; } var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(initAudioPlayer, 0) .add(runText("#hudGenius"), 1.35) //End code please don't post private pens. we can't fork them

Glad you got it worked out. Wasn't really sure what I was supposed to see. Got kind of lost in the 60 lines of code and big SVG. In the future its best to reduce things as much as possible. Anyway, just wanted to make a note that you really don't have to wrap values in css objects. You could save quite a bit of typing over time if you like tlBalloon3.to(balloon3, 0.35,{ css: {x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%"}, ease:Power1.easeInOut}); //same as tlBalloon3.to(balloon3, 0.35,{x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%", ease:Power1.easeInOut}); technically the longer way (that you are using) is more efficient on the processor, but not in the sense that you would ever notice in any meaningful way and you only get that performance increase when the animations are created (once) not when they run. Good luck with the rest of your project. looks pretty cool.

I can't really think of a faster way. I guess caching a reference to the transform object is more efficient but highly doubtful it would save more than a few milliseconds. var transform = tempClip._gsTransform output+= " 'x'=>" + (transform.x)+ ","; output+= " 'y'=>" + (transform.y) + ","; output+= " 'sX'=>" + (transform.scaleX) + ","; output+= " 'sY'=>" + (transform.scaleY) + ",";

As for why it isn't working more than once, it is very tough to know without seeing how your page is setup. Please fork our demo from the docs below and add your own code click "run pen" click "edit on codepen" click "fork" add your own html, js, css (just enough to replicate the problem) save paste the url in your reply We will be happy to help once we can see what isn't happening and and the specific errors. Also, is it possible to detect with the scrollToPlugin when you have scrolled past an element? Sorry, the plugin doesn't have any of that type of functionality built in.

Hi @Teun87, in this topic you will find a solution " new Intersection Observer API": Here an example of @PointC Happy tweening .... Mikel

It all comes down to whether or not you can trust that the string is what you think it is. If it comes from your sever, and has been validated, then the risk is low. If it's based on some user input, like a form, input, or url, then the risk is high. See how exploits work here. https://en.wikipedia.org/wiki/Cross-site_scripting#Exploit_examples @MarioLapone If you need help creating the data/instructions for your animations, this thread might be useful.

jQuery's documentation is full of poorly written code. Here they use 'this' and 'element'. $( "button" ).click(function() { $( "div" ).each(function( index, element ) { $( element ).css( "backgroundColor", "yellow" ); if ( $( this ).is( "#stop" ) ) { $( "span" ).text( "Stopped at div index #" + index ); return false; } }); }); I think it's better to use the parameter. What 'this' refers to may not always be the element. // Using function inside callback $(".box").each(function() { innerFunction(); function innerFunction() { console.log(this); // FAIL } }); // Using bound function $(".box").each(function() { console.log(this); // FAIL }.bind()); // Using arrow function $(".box").each(() => { console.log(this); // FAIL });

Hi @mikel & @OSUblake. As promised, here is a link to a short video, showcasing the result. https://streamable.com/sgntm The animation we talked about was to create a minimap for the actual game, so the minimap in the bottom left corner, is using the principal of your code examples. I believe it turned out pretty well Thank you again for the help, it was highly appreciated. - Plenge

Hi @hanslibuzli, Life is a compromise. It depends on what your focus is. I am neither a coder nor an expert - its just for fun. Kind regards Mikel

Like Dipscom said, it'll be best for you to spend a few mins setting up a CodePen account and initial pen to help us help you out. I'm not able to see what's going on without rebuilding your file on my end but... Just a quick glance at your code, my initial thought was do you NEED to be using clip path for the mask effect. Looks like you're using a simple rectangle to clip with. You could nest the content in a container, use overflow:hidden, and adjust or animate the width and height of the container to mask it. If it's an angled mask, you could rotate the container one way, and then rotate the child nested content in the other direction to make it look straight again (if that makes sense).

A few thoughts... performance.now() is expensive, FYI. You might want to limit your use of that. I probably wouldn't use autoAlpha since you're toggling values so frequently which is making the browser do more work flipping back and forth the two values (opacity and visibility). Any reason you didn't want to just use either opacity or visibility? I suspect that since opacity can be GPU-accelerated, that'd deliver the best results. The very first render of any tween (and a set() is just a zero-duration tween) is the most expensive since it must read/record the starting and ending values. You've got things set up in a relatively expensive way, with a BUNCH of tweens in the timeline that instantiate in quick succession. If I were you, I'd consider using a single tween with an ease that controls the oscillation. Here's a CustomEase I created for you that oscillates any number of times: Does that help at all?

Sure, you can snag that value from the tween instance's "ratio" property. Does that help?

You have to keep in mind that learning HTML, CSS, JS is an investment. By hand coding you deepen your knowledge and your thought process as a programmer. Eventually you can easily transition into front-end development/web animations. Who knows when you'll get bored with banners? If you're designer and you're also animating and have no desire whatsoever to code then Animate CC might be fine. If that's not the case I would seriously consider jumping into hand coding. Even if that's not the fastest workflow (although that's arguable).

Hi Marjan and Oliver, Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result. It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding. It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc. Cheers Vitaliy

Hi blendingpoint Welcome to the GreenSock forums. Looks like the plugin is running into some trouble calculating the path length since you'e setting all your sizes via percentage. If you set a viewBox size and then set the rectangle to that size, it should all work fine. Please keep in mind that you don't have to set the width of an SVG to 100%. It will automatically scale to 100% of the width of its parent unless you tell it otherwise. Also keep in mind that only half the stroke will show with that setup. All strokes are aligned to the middle so a rectangle that is the full width and height of the SVG parent will cut off the outside part of the stroke. Here's a fork of your pen with those changes. http://codepen.io/PointC/pen/XpmYga Hopefully that makes sense helps a little bit. Happy tweening and welcome aboard.

Sorry about the confusion - that sample was missing a parameter. If you look at the docs, it shows that after the vars parameter, there's "stagger" (0.01 in this case), then "position" (which is the one that's missing here), and THEN the "onCompleteAll" callback. I just updated the codepen, adding the position parameter (the default of "+=0"). And yes, you can absolutely chain animations together - TimelineLite gives you pretty much unlimited flexibility. You have total control of the placement of every animation. var tl = new TimelineLite(); tl.staggerFrom(...); tl.staggerTo(...); ... You can define a "position" parameter to control precisely where things get placed (see the docs at Does that help?