Leaderboard

Hi @Robert Wildling I believe the negative value is the way to go. Similar recent question here and Jack's answer was a negative stagger value. Happy tweening.

By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.

Here's some pens that you may find useful. These use a proxy element. These track velocity. I used the VelocityTracker.track() method because reasons, but it's the same thing as the ThrowPropsPlugin.track() method.

Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance. https://developers.google.com/web/updates/2017/10/animated-blur

Working with 50 timelines wouldn't be hard. I think the problem you might be having is wrapping your head around "this", and that's not uncommon. Everybody struggles with "this", and I do mean everybody. You should look at what "this" is in your component. Vue creates a flattened object from your component code. console.dir(this); You're not calling the allAnims method. A call will have parenthesis after it. It might help if you view your methods without the ES6 syntax. Methods are functions, and you can't add a dot (chaining) after calling a function unless something is returned. Adding your animations to "this" allows you to access them from other methods. methods: { allAnims: function(refs) { this.logoAnimation = refs.Logo.animateLogo().pause(); }, play: function() { this.logoAnimation.play(); }, reverse: function() { this.logoAnimation.reverse(); } }, mounted: function() { this.allAnims(this.$refs); // WORKS this.play(); } https://codesandbox.io/s/3vrnv37rvm

If you name that tween, you'll be good to go. var tween = TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}); $("#pause").click(function() { tween.pause(0); }); Happy tweening.

I love a challenge, so I took a crack at it here: Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. Does that help?

I was actually considering hyperlinking VHS and VCR but figured those kids would just ask Siri or Alexa.

Love this analogy! I'm wondering if it would work with young people.

Here's a tip. Don't position stuff you're going to move where you initially want it. If you drew your tile at 0,0 or centered on 0,0 you could easily move it to a coordinate on your polyline without any issues.

If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.

Hi and welcome to the GreenSock forums, The easiest way to get something to follow a polyline would be to use MorphSVG to convert your path data from your polyline to an array of points and then pass those points to the BezierPlugin as explained here: https://greensock.com/path-animation I made a demo showing how that would work var path = MorphSVGPlugin.pathDataToBezier("#route", {align:"#tile"}); console.log(path); TweenMax.set("#tile", {xPercent:-50, yPercent:-50});// center tile on path TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}) If you want to use MorphSVG you can upgrade your membership to a Shockingly Green via your account dashboard /// If you want to manually translate the coordinates of your #tile so that you can animate to coordinates on your line please read this post (especially blake's final demo) You'll see that each chicken animates from the center of the box.

It's being returned, but you're not saving it. Maybe like this. methods: { play() { if (!this.logoAnimation) { this.logoAnimation = this.$refs.Logo.animateLogo(); } else { this.logoAnimation.play(); } }, reverse() { if (this.logoAnimation) { this.logoAnimation.reverse(); } } } https://codesandbox.io/s/p7jj9k977x

Your animations aren't aware of your draggable. You can use the ModifiersPlugin if want to use the same function.

I like the stretchy animation you did. Reminds me of some stuff from Material Design. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-3y3zLHPlV3wg-v2CmlB44qg9nLmldet%2F04-elasticity-spectrum.mp4 https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PONTdRB2Ywa5Meme5pqbV35bRKFrqHLO%2F04-elasticity-basil.mp4 I like this calendar. If you click in the same row or column, then it will stretch to it, otherwise it will fade out and then fade in to where you clicked. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KL_-_R_BNLknpF2PtR-z7999Yl1d3Zwk%2F04-elasticity.mp4

It's not a bonus file, so you should be able to import it from "gsap/all" or "gsap/ModifersPlugin".

Thanks guys, with your comments our customer could get convinced that it is not a good idea to blur a 500kb image. They still wanted it and I ended up doing it the dirtiest way I could imagine, but it works fine. What we do now is crossfading a blurred image and an unblurred version. No code example, because I think this should not reproduce. This comment is meant as a thank you. Keep up the good work!

You're actually right. I still have to dive into DrawSVG, so I might do that right now. Thanks a lot!

HI @WiljeOnline Welcome to the forum. Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line: TweenMax.set("#path3", {x:-348, y:-215}); Here's a fork of your pen. Hopefully that helps. Happy tweening and welcome aboard.

Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening

Hi, You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable. Just add dragClickables: true in your Draggable instance and it will work: export default class App extends React.Component { componentDidMount() { this.draggable = new Draggable(this.draggableRef, { type: "x,y", dragClickables: True }); } render() { return ( <div ref={ref => {this.draggableRef = ref;}} style={{width: 100, height: 100, background: "#f00"}} /> ); } } Another alternative is roll-back to React 16.4.2 For more details and information about this issue, please refer to this post: And this issue in React's repo: https://github.com/facebook/react/issues/13654 The next release of GSAP will have this fixed. Happy Tweening!!!

That's odd. I've never once had any problems understanding "this". ? It is a weird thing to wrap your head around. I bumped into this post a few months ago and bookmarked it. It's a good read. https://tylermcginnis.com/this-keyword-call-apply-bind-javascript/

Yep, using a negative stagger is absolutely fine - it'll go through the array in reverse order.

Thank you very much PointC!! So helpful. Love learning about GSAP - it's amazing.

Welcome to to the forum. Your timelines have already played so an easy fix is to play(0) like this: $("#blue").click(function(){ Anim3.play(0) }) ; $("#red").click(function(){ Anim4.play(0) }) ; Happy tweening.

Thanks for the demo. I don't know much about vue so I can't address anything related to how things are set up, but I managed to find the issue. Each time you are calling this.$refs.Logo.animateLogo() you are creating and returning a new timeline. Calling reverse() on a newly created timeline only changes the direction of the playhead (reversing it). Your newly created timeline has its playhead at a progress of 0 (the beginning), so reversing it doesn't really do anything that you can see. Imagine going back in time a few years and opening up a fresh new VHS tape. If you put the VHS tape in the VCR and pushed the rewind button what would happen? nothing. You would need to play forward in order for it to rewind. Same thing applies to what you are doing. In your code you are doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().reverse() // not good } } but you can advance the playhead to the end before reversing by doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().progress(1).reverse() //better } } demo here: https://codesandbox.io/s/lrzp0p817q

Thanks @Sahil this is a very good demo for me to start! ?

Sure, it's totally doable but I don't have time right now to rebuild it all for you from scratch. You could just use an invisible <div> that's on top of the images as a proxy of sorts, and just tween the position of the "real" element(s) to match the proxy. And since you're a Club GreenSock member, you have access to ThrowPropsPlugin which can track (and report) velocity of anything, so you could tap into that inside of an onDrag or something. https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track() Hopefully that gets you going in the right direction. Let us know if you need anything else.

Thanks so much for support !!

PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. Happy tweening.

Hm, it's very difficult to troubleshoot blind and it's odd that you can't replicate the issue in codepen, but it almost sounds like when the transformOrigin is being set, the element has a zero width/height. Have you tried using a TweenMax.fromTo() instead of two calls, a set() and from()? That'd give you the most flexibility to specify exactly what you want things to start and end at. If you still need some help, it'd be super incredibly helpful to see a demo of it not working somehow

Some browsers apply pixel snapping which makes scaling jerky - you can force the browser to avoid the snapping by rotating the image slightly, even like 0.1 degrees. And for the record, the SVG spec doesn't allow 3D, so setting z:0.01 doesn't do anything for you

I think @Sahil has found a way into the "Blaketrix". He grows more powerful every day. Excellent work! ?

Hi @emilychews If I understand your question correctly, you could do this: var page1; if(page1){tl.from("#box2", 1, {y:10, opacity: .3}, "start");} Does that help? Happy tweening.

@Carl @GreenSock Hi, thank you for the reply, and for the links, I'm just feeling confused by the code, you guys replies really helped a lot, thanks, and have a great day!

@GreenSock Hi, thank you so much for the reply and the help, thank you so much!

I had the same issue in Angular 6 with WebStorm showing that the 'gsap/Draggable' didn't exist. Drove me nuts. But after visiting here I just ran it anyway and the application works fine - doesn't throw an errors.

Oh, sure, you can just animate it: TweenMax.to("#wheel", 1, {rotation:180}); Is that what you mean?

Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help

Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!

Now it all makes sense hahahah. Perfect, now I get it. Thank you very much.

Indeed, very nice work @Sahil!

Sure, all you need is one onUpdate. Here's some simplified code: let gradient = { valA: 0, valB: 0 } elem.tl .to(gradient, 1, { valB: 100, ease: Linear.easeNone, onUpdate: () => { TweenMax.set(elem.el, { webkitMaskSize: 'cover', webkitMaskImage: `linear-gradient(170deg, rgb(0, 0, 0) ${gradient.valA}%, rgba(255, 255, 255, 0) ${gradient.valB}%)`, }) } }, 0) .to(gradient, 0.5, { valA: 100, ease: Linear.easeNone }, "-=0.5"); You can have tweens update the raw "gradient.valA" and "gradient.valB" as much as you want, and just point their onUpdate to a common function if you'd rather - the point is simply to have that function apply ALL of the values to the final string. Is that what you're looking for?

Great job, Sahil. love the demos!

"t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.

You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,

Thanks for the demo. Its very helpful. Since you are new to the platform this is a great challenge to try to tackle as a beginner, however it appears you are trying to do some optimizations (like creating loops) before really understanding how things work. There are a few errors and things I don't understand that are probably just due to experimenting and lack of experience (which is TOTALLY fine) and I don't want to spend a lot of time picking it apart but some things to note: you shouldn't be assigning multiple tweens to the same tween variable (var tween = TweenMax.to()) you can't put repeats on TweenLite tweens, only TweenMax tweens instead of using animation.add() you should use animation.to() to save a lot of typing (see my example below) Most importantly, when working with timelines its crucial to understand the position parameter. You should be using it instead of delays on each tween in your timeline. Please study this page: https://greensock.com/position-parameter - Once you understand that page you will be well on your way to becoming a timeline master. In cases like this I would strongly suggest working with a very very reduced example (as little HTML and CSS as possible) and writing the code long-form (no loops) so that you get the basic effect you want working correctly, with the right timing BEFORE you try to refactor it and make it shorter. Please take a look at my example. It may not be exactly what you want, but should be a good starting point. Once you get the text hiding and revealing they way you want, then you can try to work with a more complex svg, additional elements and different effects for the wipe.

Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.

The negative stagger value technically works here, but I'd advise caution with that because it actually makes the startTimes go backwards, so for example, if you've got 10 elements in the array and you put the staggerTo() at the beginning of the timeline and the stagger is -0.1, the last tween would actually be positioned to start at a time of -1 which is before the timeline's start. Luckily there's code in place that senses that condition and literally picks up and moves all the tween forward because it knows that nothing is supposed to start before a time of 0. That's why it works here, but let's say you had built a timeline that already had 10 seconds of animations in it, and you append a staggerTo() to the end with a negative stagger value - you'd end up getting an overlap. If we took the example above (10 elements, -0.1 stagger), the last element in the array would start animating 1 second before the end of that timeline. Of course you can use that to your advantage. And it's not a bug or anything - you're asking it to stagger the start times by a negative number after all. The only other situation I can think of that might surprise you is if you've got a timeline that already has a bunch of tweens in it, and you put a staggerTo() at the very beginning of the timeline, and use a negative stagger - since that produces tweens with negative startTimes, the timeline would have to pick all the tweens up (including the existing ones in the timeline so that things remain synchronized properly) and move them forward, thus the startTimes of the old stuff would be affected. In my opinion, if you want to reverse the order in the array, just do this and use a positive stagger: var reversedChars = mySplitText.chars.slice(0); reversedChars.reverse(); tl.staggerFrom(reversedChars, 0.5, {opacity:0, y:50}, 0.2);

Hi, Well this are always a good starting point: http://www.greensock.com/jump-start-js/ http://www.greensock.com/sequence-video/ In terms of nesting, my idea is that the more you nest the better it is. For example you have 10 different timelines, some of them might play in sequence and some others might overlap. Imagine setting the particular delays of each one in order to accommodate what you're doing and let us assume that you can get to that point, everything is working fine you show the stuff to your client and they tell you:"mhhh, you know what, why don't you make the logo animation a little bit longer", and the freaking logo animation is the second timeline, that'll mean that you have to adjust, BY HAND, the delays and durations of the other eight timelines and their particular delays, you're in for a nightmare. While if you work with nested timelines and you add every particular timeline into a label, that duration change in the second timeilne means nothing, because the timing and sequence of the rest of the animation is pushed by that amount of time automatically, in fact you can put a very cool face and said:"absolutely, just give one second", you open your code editor, adjust the timing, play the animation again and your client jaw drops to the floor (of course the jaw dropping part might not happen, but still you're going to look good). My advice is: 1.- Nest as much as you can, if you need to put a timeline, inside a second one and then nest the second one in a master, do it, because that also will allow you to isolate any issue you could find while writing your code. 2.- Always use labels, they are incredibly helpful, specially for the scenario you indicate, when some timelines will play at the same time. Like the sample I mentioned, if you put your timelines relative to a label position your life will be incredibly simple when you need to make changes. 3.- Bookmark both the Greensock collection in Codepen and the JS API docs, I can't tell you how helpful this could be. I hope this comes in handy. Happy Tweening!! Rodrigo