Leaderboard

On first click JinJang rotates to 360, on second click because it is already at 360 it won't animate anymore. try '+=360' but fast clicking will mess up your animation, in that case you fromTo tween and animate from 0 to 360. TweenLite.to(JinJang, 6, { rotation:'+=360', transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); //or try fromTo tween TweenLite.fromTo(JinJang, 6, {rotation: 0}, { rotation: 360, transformOrigin:"center", ease: Power0.easeNone, repeat:10 });

I think a lot of people just use a rectangle or circle in a mask element and call it good, but you can add multiple shapes and opacity levels to come up with interesting results. In a case like yours, you could also use a circular mask and have the outside lines wrap around the shape. You're certainly not limited to primitive shapes. You can add any complex path to cut a space into lines (or other elements) and that will create a tight wrap around the edge or leave a gap as I've done in the above demo. I like your animation as it is. I'm just throwing the mask idea our there for future reference. I'm glad you have a solution. Happy tweening.

Alright, I think I figured out the issue. It has to do with the fact that you were doing a cubic bezier animation which made it jump to entirely new coordinates right at the start of that tween, but in reverse it doesn't RETURN it to the original (pre-bezier) values. So imagine x/y start at 0,0 and then you do a bezier tween that makes them jump to 100,100 at the start of the tween and animate to new values from there. In reverse, that tween would end up with x/y at 100,100, not at 0,0. You could add a set() just before that and use a relative value for x and y of "+=0" and also apply the transformOrigin there as well so that it's all recorded in a keyframe on the timeline. That way, in reverse, it'll jump back there. Here's the revised code for your isolated version: var action = new TimelineMax() .set($biddy,{autoAlpha:0}) .from($bustOpen, 2, {drawSVG:"0%",ease: easeStepped07},1) .to($eggAbove,2,{y:-10, rotation:10, transformOrigin:"right bottom",ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false})}) .set($eggAbove, {xPercent:-50, yPercent:-50}) // --> THIS LINE IS NEW <-- it records the x/y position and the transformOrigin before the motion path bezier. // .set($eggAbove, {x:"+=0", y:"+=0", transformOrigin:"center center"}) .to($eggAbove, 2, {bezier: { values: motionPath, type: "cubic"},ease: Linear.easeNone}) .to($eggAbove,2, {scale:0, transformOrigin: 'center center'}, "-=2") .to($eggAbove,2, {rotation: 180, transformOrigin: 'center center'}, "-=2") Sorry about any confusion there.

Thanks for reporting back, @JoePro

@GreenSock Just has an update to anyone following. I think the lesson learned was that the NPM version of GSAP will allow more scope for dev and utility features for myself and future projects. The use of draggable was fairly straightforward after that: 1. Simply put the Draggable.js file into the 'gsap' folder within the 'node_modules' directory 2. Then call using this method: //WORKED FOR ME: import Draggable from "gsap/Draggable"; 3. Then happy days!!! Thanks again Jack JoePro

Yeah, I'd stay far, far away from eval(). It's a security concern, a performance concern, and I've heard of vendors flat-out blacklisting pages/scripts that use it anywhere. It's much better to structure your data in a way that'd allow you to re-form it properly in the JS context.

Hi @Ali Farooq Just to throw my two cents worth in the mix for you -- a mask could be helpful here. The group of lines appearance is controlled by the mask so I added one white rectangle that is is the same size as the SVG which allows them to be completely visible. A second rectangle with a black fill is then added over the top of the white one which is scaled to block out the center of the lines. Since this is a mask and not a clip-path, you could also add a gradient if you wanted for a nice feathered edge on the lines too. Masks give you a lot of options. Hopefully that helps. Happy tweening.

If I understand correctly, I think he wants to use a loop just to minimize the code. Interestingly, our example in the scrollToPlugin docs actually has loop snippet commented out at the bottom. Here is the code $("button").each(function(index, element){ $(this).click(function(){ TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}}); }) })

I'm sorry that is quite an advanced effect. It would probably take me a few hours to get something working in a rudimentary fashion from scratch. It does remind me quite a lot of what @OSUBlake is doing in the demo below: It has the same effect of dragging and throwing a bunch of things and they get bigger when they get to center and will snap so that one item is "highlighted" when done animating. A bonus feature of Blake's demo is that it wraps infinitely in both directions. This thread (which people should favorite ) has some great discussion points

You're firing your scrollTrigger() function multiple times which in turn is firing the sliders() function over and over. The timeline that is created in the sliders() function is starting to play and then is immediately overwritten (many times) so all the starting positions of the elements get out of whack quickly. Recreating the timelines every time you hit the trigger is going to be problematic. I'd recommend looping through and creating your timelines in advance and simply play/reverse/pause them when needed. You may also want to look at something like ScrollMagic or perhaps the new Intersection Observer to trigger those animations. Here's a good discussion which talks about the Intersection Observer. Here's a recent article on Smashing https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/ Happy tweening.

We talked about The Intersection Observer in this thread (with examples): Smashing just dropped a good article here: https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/ Happy tweening.

Hi @DevSaver Welcome to the forum. If I understand your question correctly, I think this thread can help you. Happy tweening.

Alright, I had to have a little fun with this one, so I created a Codepen that makes this super easy for you: Just tweak the startEase and endEase at the top of the JS panel and BOOM, it'll do it for ya. Click the "CustomEase" link at the bottom and it'll even jump you over to the ease visualizer with that ease pre-populated. Notice you can even click on the resulting custom curve and it's editable Is that what you were looking for?

If you're talking about literally a className tween, yes, GSAP simply applies that class, looks at exactly which css properties get affected by the browser, and animates between the old state and the new one. So you'd need to make sure your class affects things in whatever way it needs to (with prefixes, etc.). I generally recommend against using className tweens just because they seem a tad clunky (and expensive) to me, but they're totally legit and you're welcome to use them.

in cases like this it would really help if you could provide a simple demo: I find it a bit odd that this function returns hudline, which appears to the be target of a tween function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } Also, I'm not sure what you are expecting to happen with these 2 calls .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) That is not going to put the animations that runText and hudFadeEffect create into your timeline like your first add() does. Also, every time you replay master its going to call() those 2 functions each time , spitting the text again and making new animations. Definitely check out: https://css-tricks.com/writing-smarter-animation-code/ This demo below loads GSDevTools and every bonus plugin. Just fork it and add enough html / css / js to replicate your problem. I'm sure we can offer better assistance once we see what is happening.

Hi Hector, Do you have a demo of your progress so far? Is there something related to GSAP that you are stuck with? Please understand that guys like Sahil are happy to point people in the right direction and explain the GSAP API. However, its quite different to build complex animations from scratch so hopefully you will understand that the people offering free help here can only do so much.

Hello @ekfuhrmann and welcome to the GreenSock forum! I believe @Dipscom was referring to the Intersection Observer API to detect when something is inside the viewport. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Happy Tweening

Hi @martis! I've got some experience with Vue but none whatsoever with nuxt. The way I structured my last Vue project was having the animations totally separated from the actual components - The oposite to what you are asking... - But in modules that could be accessed from different points. Something like: > folder: animations > > Shared.js > folder: components > > Component.vue The the code would be something like: // Shared.js export default { dur: 1, svgDecoratorIn( el ) { const trg = el + ' path' return TweenMax.staggerFrom( trg, this.dur, { drawSVG:'50% 50%', }, 0.2 ) } } // Component.vue <template> <div> <transition mode="out-in" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" > <router-view></router-view> </transition> </div> </template> <script> import Shared from './Shared.js' export default { methods: { enter(el, done) { this.$nextTick( function() { Shared.svgDecoratorIn( '#targetSvg' ) } } } } </script> Obviously this is a massively oversimplified version of it but I hope it gives you an idea. I would then make small flexible animation functions that would return a new Tween or Timeline based on the given element as an input. Those can be used to create more complex timelines, be called by parent components or children components. The catch, to me is making sure the desired component exists in the DOM before calling the animation functions. I'm guessing Scene1, 2 and 3 don't all get loaded/rendered on page load. An alternative technique, that I just thought of, if you really must have the animation encapsulated in the component, is to save your component timeline in a variable and $emit that up to the parent component. The parent component then, would grab the timeline from the payload and push into a master timeline of its own. I need to have some lunch now but will try and have a proof of concept setup when I am back... Watch this space.

Here's something I quickly whipped up for you. Not sure if it fits your needs perfectly, but hopefully it gets you moving in the right direction and illustrates the concept: Notice you can fill those DIVs with whatever text you want and it'll find the matching words and do the transition all automatically for you. It even returns a TimelineLite so you can control it all as a whole, dump it into another sequence, or whatever. Does that help?

Trick here is to append a clone of the first .slide to the end of #slider. Animate through for the count of the slides minus 1 (i.e. ignore the last slide ... that is to say, less than totalSlides minus 1 because we address them with a 0 index) so that as the last slide gets into position, the slider starts back from zero resulting in a fairly seamless loop.

I saw your question and by the way is the same concept of a project that was creating, using really the methods that @OSUblake mentioned. There are some adjustments to be fixed, but if you have not gotten the result, it can help you. Ps .: I used a demo video of ShutterStock because of the fluids, but you can do with images in a spriteAnimation:

I am happy with the mention, but the merits are yours. And I'm happiest to receive a compliment from this coming from a person who handles a lot. Thank you

Here's some ideas for function-based values. The animations are pretty blah, but most of them can be spiced up by using a stagger. Quick fork of the spiral.

Ah, it looks like Microsoft browsers botch the placement of ":checked" when reading things via JS. Try this: infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner') || CSSRulePlugin.getRule(':checked#info-input ~ #info-inner'); Notice Microsoft shoves it to the start.

And here's an example of how to make a draggable picker / spinner.

Here's a modified version of that demo with the basic behavior you described. It uses the ModifiersPlugin. With that you can change values while they are animating. Very useful for doing things like wrapping values.

I made this demo the other day, and I think it will be easy to modify to do what you want. I'll create another version of that later on today.

Hmmm... have you thought about maybe making it draggable? Using the ThrowPropsPlugin with Draggable, you could do something like how setting the alarm on a lot of phones work. That would allow you to easily flick the value to 500g of rice. Here's a draggable/throwProps demo you can play around with. Notice how you can drag the wheel and the page sections. The ThrowPropsPlugin is a Club GreenSock bonus plugin, so it's not free. I'm not trying to pressure you into becoming a member. This just seems like a perfect use case for it.

Hello @A7DC and welcome to the GreenSock Forum! Whats happening is the CSS overflow property is set to overflow hidden. Add this line to your CSS button svg:not(:root) { overflow: visible; } Resource: SVG overflow: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow Just keep in mind that using overflow on SVG is a little different than DOM based elements, but should not give you any issues. The overflow attribute has the same parameter values as defined for the css overflow property. However, the following additional points apply: The overflow attribute only applies to elements that establish new viewports (see below), <pattern> elements and <marker> elements. For all other elements, the property has no effect. For those elements to which the overflow attribute can apply, if the overflow attribute has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a <clipPath> element whose content is a <rect> element which defines the equivalent rectangle, and then specifying the <uri> of this <clipPath> element on the clip-path attribute for the given element. If the overflow attribute has a value other than hidden or scroll, the property has no effect. Within SVG content, the value auto is equivalent to the value visible. When an outermost svg element is embedded inline within HTML, if the overflow attribute has the value hidden or scroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules. When an outermost svg element is stand-alone, the overflow attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport. The initial value for overflow as defined in CSS is visible, and this applies also to the root <svg> element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the overflow attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value hidden. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css overflow for further information.

HI @A7DC You're not doing anything wrong. You may have to make an adjustment though. What's happening is the Elastic ease is overshooting the scale beyond a value of 1 so the heart goes beyond your SVG edges. One option would be to change the size of the SVG so the heart path has some breathing room to expand beyond a scale of 1. Another option would be to use a CustomEase - https://greensock.com/customease You can sometimes make things work by setting the overflow of the SVG to visible too, but I'm not a fan of that option as it can cause other problems. Hopefully that helps. Happy tweening.