Leaderboard

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?

Have you gone through the thread I mentioned? If you are looking to create something similar that people usually do with scrollmagic throughout your project then there are some approaches that you can take. If you just want to fade opacity then following demo shows how you can do that with pure JavaScript and GSAP. If that doesn't help, then post your reduced case demo so we can see what you are doing and what you wanna do.

Ah yes, it doesn't support mixing a suffix with a relative value but I've added support in the next update of GSAP which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better? In the mean time, you could use a function-based value and build the value appropriately like this: Or if you want to be fancy, you could even use ModifiersPlugin to add the % dynamically on each tick like this: But frankly the first option is more performant overall. Does that help?

You had a few issues: 1: the url you used for DrawSVG was kind of messed up. 2: your svg code was malformed in multiple places where you were setting the class attribute (missing =) <circle class"ring1" ../> should be <circle class="ring" .../> 3: you were sending class values in document.getElementById() var ring1 = document.getElementById(".ring1") should be var ring1 = document.querySelector(".ring1"), 4: Your stroke always had no length which makes it impossible to see. When you set drawSVG:0 that means the beginning and end of stroke are both at 0 and there is no stroke to see (it has no length). If you tween to drawSVG:"100% 100%" that means the beginning and end of the stroke are both at 100%, again, meaning there is not stroke to see. You need to make sure that at some part of the animation the beginning and end aren't the same so that you can see some of the stroke. I made some changes so that you can see some of the animation. Feel free to tweak the values as you see fit:

Ah, that's just a scope issue. In other words, in your first example, play() is being called directly on "child", but in your second example there is no scope declared. That's just how JavaScript works - it's unrelated to GSAP. To correct your second call, you can define the scope like: parent.call(child.play, [0], child); Does that clear things up?

I have a ton of projects. All kind of clients mainly from 3 ad agencies. I haven't noticed any decline. ( I hope they will relax a bit )

Great examples, Sahil. The last one was very clever. ---- LeoZ, For scroll-driven animation it is probably easiest to learn the basics of ScrollMagic. As Sahil pointed out, there are other ways, some of which are documented throughout the forums. We really do have to keep our support focused on the GSAP API and its features. We just don't have the resources to provide alternate solutions to other libraries that already do what they do really well.

If you want the SVG animation to look like the CSS animation, I think morphing may be a bit of overkill. Why not just animate the border radius attribute of the SVG? Just my two cents worth. Happy tweening.

Currently you can only have a single width on a SVG stroke. Variable widths may be coming in the SVG 2.0 (or later) spec, but for now you're stuck with a single width. You can create an open path in AI with a variable width stroke using the width tool, but as soon as you export it to SVG you'll get a closed path. Here's an example of an open path with a 10px stroke and a variable width stroke (which is actually a closed path) being revealed with a mask. You can certainly attempt to add points and pull Bezier handles around for hours, but even the most perfect open path curve will eventually overlap itself if you make the stroke too wide. Here's an open curve with three stroke-width versions (2, 24, and 48). You can see the first one is a nice curve, but as that stroke gets wider, it gets really ugly. As I mentioned, you can add points and adjust handles but accurately matching an existing font with an open path can be tricky. Choose your font wisely. Of course, you can always just use a mask for the reveal too. Hopefully that helps. Happy tweening.

Here is demo with ScrollMagic. It has really easy learning curve depending on your experience with GSAP. Link to video tutorials: https://www.youtube.com/watch?v=QpedXxC0e5o&list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU- Link to examples page with enough examples to do almost everything: http://scrollmagic.io/examples/basic/responsive_duration.html Though ScrollMagic is getting out of date so you may want to look for other methods and libraries, following thread discusses different approaches.

I'm not 100% sure what you want the animation to do. The 1st demo you posted has some half circles rotating back and forth, but you also mentioned Carl's demo that draws from 0,0 --> 0,100 --> 100,100. Is this what you're trying to do? Or were you wanting the lines to yoyo like this: Hopefully those point you in the right direction. Happy tweening.

For anyone who can benefit from it I found this discussing it https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/. The solutions contained in it appear to fix the issues in ie11 at least for inline svg code and svg in img tags that i needed it for. in my case this worked: width:100% on img tags and on containing element for svg objects/code i.e.(div.svg-container > svg) .svg-container { width: 100%; height: 0; padding-top: 100%; position: relative; } .svg-container svg { position: absolute; top: 0; left: 0; }

@GreenSock That was it, many thanks Jack, I will hopefully get draggable.js working now, I will get back to you, If there are any issues. many many tnxs JoePro

Ah, I think the problem is your import statement: //BAD: import TimelineMax from "gsap"; //GOOD: import {TimelineMax} from "gsap"; //ALSO GOOD: import TimelineMax from "gsap/TimelineMax"; Remember, "gsap" just points to TweenMax which is probably why your import was referencing that instead of TimelineMax.

Looks like @Carl beat me to it. There were some corrections needed there. For my two cent opinion, I'd add that you could also achieve an animation like that by simply staggering the rotation of the circles. Something like this: Happy tweening.

Ok, clearly never do things at 2 a.m. - turns out my index.js was ref'd in the head so of course it wasn't picking up the string elements on the page before the script ran. doh. Hope this maybe helpful to other late night developers. Now where's my coffee.. Thanks Carl. Buzz

Ah, scope, my old friend*. *enemy Yep, all clear now, thanks again

Hi, thank you very much. For now, I go with the function-based value, works perfectly. I also tried the 1.20.4 beta, it worked fine with integers, but breaks when decimal numbers are used: TweenMax.js:7033 Error: <stop> attribute offset: Trailing garbage, "36.5.%". Maybe that's an issue... Thanks again, Becca

That is tremendous help! Thank you! I will give it a try. Just to make sure - since I want a flickering animation, my ease should be a square wave function. I could crate that with vertical and horizontal lines in svg. But I see you avoid vertical lines. The idea is that the svg path has to be a function, right? (ie, no two x points with the same y value). In that case, horizontal lines with slightly diagonal lines connecting them is the way to go?

That didn't seem to get me any further, I think these kind of animations are still a bit out of my league. I'll get to studying some more JS and try to do this in the future. For now I'll go with the Animsition route which is working fine although the Barba way seems a bit more robust. Thanks for the help anyway, seems like a great community here!

I have figured out how to get the resizing to work: I understood the need to .clear() the timeline on each resize, but it was confusing me how to fix the animation as particles would randomly fly from mid-way through other lines on the polygon. I fixed this by immediately setting the start point of the animation to the last point of the shape (Where the last path ends), which has done the trick. Took me some time to figure it out but I got there It could probably be a little neater but it works! Now all I need is to initially fly the particles in from the edges of the canvas, any help achieving this would be much appreciated as I have no idea how to go about achieving it.

Hi @PointC, It just needs experts - sorry, a SuperHero - for simple solutions. As already the famous Sepp Herberger said: "The round thing has to go into the rectangular thing ..." It's that easy with football, too.

Haha.. it's all good ?

Glad you got it sorted. Just to make sure you got all the details, you can use CustomEase to create an ease from those bezier values. Since you are already a member of these forums, you have access to CustomEase. Learn more about it here: https://greensock.com/customease On that page there is a video that shows exactly what is happening in the demo above with the custom cubic-bezier values. Watch at 9:47

Yup, dipscom is exactly right. For slight clarification, the issue is that you are trying to do 3D transforms on SVG elements. Some browsers will allow it but it isn't technically part of the SVG spec.

sounds like you could use an onComplete callback like function turn_gear1(event:MouseEvent):void{ TweenLite.to(gear1, 1, { rotation: "+=10", ease: Linear.easeNone, onComplete:getRotation}); } function getRotation() { trace(gear1.rotation); }

Hi @dgmldr, Please have a look to your CSS .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); transition-duration: .4s; transition-timing-function: ease-in-out; transition-property: margin,max-height,opacity,top; If you try ... .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); /* transition-duration: .4s; */ /* transition-timing-function: ease-in-out; */ /* transition-property: margin,max-height,opacity,top; */ } you will have a clear responsibility for the job - done by GreenSock. Kind regards Mikel

Hi @Syniky, Welcome to the forums. That is because 3D transforms are not really supported on browsers. At least not yet. In order to have your doors rotate in the Y axis, you will have to separate them into DOM objects. That way you will get the rotation as you expect.

@mikel, thanks for the links. I'm still processing all that info in that thread. I'll try those out @Sahil, hey that's an interesting hack :D. I wonder if my users will notice. Let me try this on some users and see the result

Hi @smallio If it were my project, I’d probably use masks as @mikel suggested. That route will most likely give you the least number of headaches. That being said, you can recreate fonts with consistent stroke widths. Here’s a quick example of the word ‘social’ from your demo. You can see that the ‘s’ and the ‘a’ aren’t exact matches, but they’re close. The problem with the ‘s’ is the tight turns. When you have a closed path, you can easily make the curves, but now we have an open path with a stroke running down the middle. The turns look less smooth as the stroke gets wider. The ‘a’ has a variable width stroke on the curved portion which won’t work so I just made it consistent all the way around. When you have projects like this, you can usually make it work by recreating the font, but you may have to make some artistic choices that will make the font appear slightly different than the original. If you’re using AI, the pencil and/or curvature tools are great for this type of work. I wrote some posts on CodePen about recreating fonts and the handwriting effect. You may find some useful info in them. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here’s the final demo from those posts. Hopefully that helps. Happy tweening.

Alex, I'm afraid we don't have enough context to help you as it is... There's nothing in the code you posted that suggests anything should happen with mouseover, and there's nothing immediately wrong that I can see assuming everything else is set up right – except that your code should end with }); not })}. With no more information, it's hard to point you in the right direction beyond that. Please consider sharing more code, and if possible use a codepen following the instructions here:

Hi @jimthornton, and here is a rough concept for an animation that is activated by scrolling: Make the best of it ... Mikel

Hi @smallio, Exactly right, drawSVG only works with strokes. But "writing a special font with strokes" is almost impossible. @PointC has some examples in the forum that cover this topic. I quickly found this. The trick: "use drawSVG to animate the mask and reveal the logo" or a letter. That is still complicated for all letters ... Happy masking Mikel

Thought I'd share what I came up with. I ended up using TweenMax instead of TimelineMax. Sounds obvious, but TimelineMax is used for animation scenes when things need to start at different times. This wasn't what I was after. Gotta say, I love that yoyo:true ha!

You are adding the class active to project instances but you are telling gsap to animate the items overlay etc... which is animating all the items regardless of what happens to the project element. The pen attached moves the variable declarations inside the function and queries the elements inside each specific project element rather than the document. This way you don't need two scenes and timelines. A scene and timeline is created for each instance of project and reacts to the trigger independently. I think this is what you're after. For whatever reason forEach cannot be passed 'this' directly so we pass it as a variable reference 'self'. Class toggle active is not required for the animation but you can retain it for other scripts if needed.

Do you mean that when you press "go back" on your browser, the current page stays visible and animates back to what was shown before? If that's the case, you need to use functionality that's beyond the scope of GSAP to intercept the browser's 'go back' behaviour. You should have a look at this page: https://developer.mozilla.org/en-US/docs/Web/API/History_API and potentially History.js which is no longer maintained but could still be useful. Once you successfully detect that the user is trying to go back and prevent the default browser behaviour of actually reloading the previous page, then you can look into how to reverse your timelines to make your website 'smoothly' go back to the state it was in before.

Let me take this piece-by-piece.... It doesn't become something else (complex tween), no. But it's correct that a child can't exist inside or multiple parents at the same time. Just like a DOM node. Remember, an animation's playhead is always controlled by (and synchronized with) its parent timeline's playhead. tweenFromTo() doesn't copy anything anywhere - it simply creates a tween that literally animates the "time" value of that timeline. That's it. So if you put 100 tweens into a timeline that do all kinds of movements and rotations or whatever, and then you call tweenFromTo() on that timeline, all of that animation data still only resides in that original timeline - there's just a single tween that gets returned that literally animates one property - the "time" - of that timeline. Sounds about right. There's a fantastic article about this technique at https://css-tricks.com/writing-smarter-animation-code/ (I'd highly recommend reading it). Yes, that's correct. This technique is fine in some cases, but keep in mind that you won't be able to scrub the timeline forward/backward if you structure things this way. You're just triggering actions that fire off animations that aren't embedded in a parent that'd make it possible to control them all as a whole. Again, that's perfectly fine in some cases - I just wanted to make sure you understood the tradeoff. I wouldn't say there's one way that the "right" or recommended way. It all depends on your goals. Also keep in mind that when a tween renders the very first time, that's when it records its start/end values internally. So if your SVG face starts normal and you build one "wink left" animation, and one "wink right" animation which will run based on the click of a button, think about how you want the animation to work - if each animation starts from the "normal" state and you're reusing the exact same timelines and just playing/reversing them on button clicks, imagine what'll happen if the user clicks the "wink left" button and halfway through that animation, they click the "wink right" button. In my opinion, the most natural thing would be to create a new tween/timeline that animates it from the current (partially winked) state to the next state rather than robotically jumping back to "normal" and animating from there. But if your goal is to always maintain exactly the same starting/ending states, it's wise to always reuse the same timeline (and/or animate its playhead via the tweenFromTo() method). Does that help?

Hi @jimthornton, There are many ways to Rome and sometimes to a simpler solution. Here is just a playing field as a suggestion: Happy circling by tweening ... Mikel

Hi @fencepencil, Take a look at these remarks: Understanding the Position Parameter (here). Your code line 6 and line 8 looks like you want a yoyo-effect ('yoyo: true') - maybe like this: TweenLite.set(".circle", {transformOrigin: 'center'}); TweenLite.set(".circle-tail", {transformOrigin: '100% 50%'}); var tl = new TimelineMax({repeat:-1, yoyo:true}) .fromTo(".circle", .4, {scale:0.8}, {scale:1.3},0) .fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7},0) Or every tween for themselves: TweenLite.set(".circle", {transformOrigin: 'center'}); TweenLite.set(".circle-tail", {transformOrigin: '100% 50%'}); var tl = new TimelineMax() .fromTo(".circle", .4, {scale:0.8}, {scale:1.3, repeat:-1, yoyo:true},0) .fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7, repeat:-1, yoyo:true},0) Happy tweening ... Mikel

Hi @TomWWD, I hope I did it right quick. Use onComplete, so that only after the end of the "bloganim" the mouse function is feasible ... Happy blocking ... Mikel