Leaderboard

Just to elaborate on what @PointC said, your code is already setup to get a timeline from a function. That's what a return statement does. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return The onClick handler will kill the intro animation and play the hide animation. var introAnimation = introAnim(); var hideAnimation; function introAnim(){ return new TimelineMax() .to(foo, 5, { x: 500 }); } function hideIntro(){ return new TimelineMax() .to(foo, 1, { autoAlpha: 0 }); } function onClick() { introAnimation.kill(); introAnimation = null; hideAnimation = hideIntro(); }

Is the introAnim() returning that timeline to a master? If that's just a function that fires on page load you could just create a regular timeline and give it a name. Then in your hideIntro() function you can kill() the timeline from the introAnim() function. If that's not an option you always have the killTweensOf() method that you could add to the hideIntro() function. https://greensock.com/docs/TweenMax/static.killTweensOf() Does that help at all?

Why don't you just start the animation from the top instead of the center? These do the same thing. var tl_bobbing = new TimelineMax({repeat:-1, onRepeat:checkShouldStop}); tl_bobbing.fromTo("#redSquare", 0.5, { y: toPX(-5) }, { y: toPX(5), repeat: 1, yoyo: true, ease: Power1.easeInOut }) .time(0.25); // start at y = 0 var tl_bobbing_yellow = new TimelineMax({repeat:-1}); tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(5), ease:Power1.easeOut}); tl_bobbing_yellow.to('#yellowSquare',0.5,{y:'+='+ toPX(-10), ease:Power1.easeInOut}); tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(+5), ease:Power1.easeIn});

That's how I usually write code that can be chained together, but there's nothing special about it. It's just shorter. You don't have to create a variable to start chaining timeline methods together. Think about jQuery. Most people would probably do #1 as using a variable might be redundant if you're never going to reference the button again. // #1 $("#button").text("Click Me").click(onClick); // #2 var button = $("#button"); button.text("Click Me").click(onClick); One thing to be careful about when returning something that spans multiple lines is that there needs to be some code directly to the right of the return statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return#Automatic_Semicolon_Insertion // GOOD function intro() { return new TimelineMax() .to(foo, 1, { x: 100 }); } // GOOD function intro() { return ( new TimelineMax() .to(foo, 1, { x: 100 }) ); } // GOOD const intro = () => new TimelineMax() .to(foo, 1, { x: 100 }); // BAD function intro() { return new TimelineMax() .to(foo, 1, { x: 100 }); }

You really can't make a quad like that with HTML, let alone animate it. You should look into SVG. Here's a good place to start. http://tutorials.jenkov.com/svg/index.html Really simple example of animating a <polygon> This post shows another way to animate a <polygon>. It's more advanced, but allows you to animate each corner independently.

I don't use Vue, so I'm not the best person to ask. Maybe @Dipscom can chime in and give some tips. I looked at Vue's documentation, but I didn't see any mention about where to store stuff besides the data object. I could be wrong, but the data object doesn't seem like the correct place to store stuff like animations, so I'm just going to assume that it's safe to store animations directly to 'this'. export default { mounted() { this.introAnimation = this.introAnim(); }, methods: { introAnim() { const tl = new TimelineMax(); return tl; }, hideIntro() { const tl = new TimelineMax(); return tl; }, onClick() { this.introAnimation.kill(); this.introAnimation = null; this.hideAnimation = this.hideIntro(); } } } Since you working with an object, you could also store the timeline directly inside the method instead of returning it. export default { mounted() { this.introAnim(); }, methods: { introAnim() { this.introAnimation = new TimelineMax(); }, hideIntro() { this.hideAnimation = new TimelineMax(); }, onClick() { this.introAnimation.kill(); this.introAnimation = null; this.hideIntro(); } } }

Yeah, its really hard to know exactly what you mean without seeing some sort of reduced test case. PointC is exactly right, you can add your tweenFromTo()s to a timeline and that might do the trick for you. Its important to note though that if you skip over a tween in a timeline it is still going to render in its end state. You sort of eluded to the fact that you understood this when you suggested "soft-removed" In other words if you have a timeline that tweens 3 colored elements like tl.to(red, 1, {x:100}) .to(blue, 1, {x:100}) .add("greenStart"); .to(green, 1, {x:100}) .add("greenEnd"); if you do a tween like tl.tweenFromTo("greenStart", "greenEnd") you are still going to see red and blue at an x of 100 because when the playhead jumps to "greenStart" those first 2 tweens will need to render in their end state. -- Without knowing more about your project I wouldn't put all my tweens in 1 timeline if I had to skip parts of it, I would create 3 different timelines and then build another timeline built of tweenFromTo()s of those timelines so imagine you had var blue = new TimelineMax() var red = new TimelineMax() var green = new TimelineMax() and each of those timelines had a label of "start" and "end" at the start and end respectively. I would then build a timeline like var master = new TimelineLite //play through blue, red, and green in direct succession master.add(blue.tweenFromTo("start", "end"); master.add(red.tweenFromTo("start", "end"); master.add(green.tweenFromTo("start", "end"); //play blue and then green BUT skip red master.add(blue.tweenFromTo("start", "end"); master.add(green.tweenFromTo("start", "end"); Hopefully that helps. Again its likely we might be misunderstanding something, so feel free to post a simple demo if you need more help.

If you want to watch it in slow motion and watch for the weird flicker you can set a slow timeScale. var modalCloseSurveyTl = new TimelineMax({ paused: true }).timeScale(0.1); You could also use GSDevTools to scrub the timeline and watch for anything odd. Edit: looks like we posted at the same time. Glad to hear you fixed it.

If I understand your question correctly, I'd probably use the tweenFromTo() method. You could add those to a master and play() it. Maybe something like this: master.add(tl.tweenFromTo(0, "skipStart")); master.add(tl.tweenFromTo("skipEnd", tl.duration())); I have no idea what you're animating, but that could result in harsh jump of your elements. Happy tweening.

A little trick I learned from Professor @Carl: Use a set() tween to set the height to auto and then immediately start a from() tween than animates from your desired starting value. (40px in your case) More info in this thread: Happy tweening.

You can use a stagger. It would be better if the icon and the background circle were each in their own group, but you can make it work like this: Is that what you needed? Happy tweening.

Looks like I was right about storing stuff on 'this'. Vue doesn't have a proper place to declare/store non-reactive stuff. https://github.com/vuejs/vue/issues/1988 According to that issue, you can add/initialize private stuff in the created hook. For example, if you want to create some sort of master timeline, this should work. export default { created() { this.mainTimeline = new TimelineMax(); }, methods: { someAnimation() { const childTimeline = new TimelineMax(); this.mainTimeline.add(childTimeline); } } }

It looks like you're trying to animate something like buoyancy. I'll just throw this out there if you want to see an accurate simulation. There's no GSAP involved, but it might give you some ideas about the behavior. Click anywhere to move/throw the ball.

You might be able to use CustomWiggle for symmetric movement from center. https://greensock.com/docs/Easing/CustomWiggle Following is a demo I created where elements have their default animation but when you move mouse they start following the mouse. Instead of animating actual elements, I have some objects that I tween. The elements follow certain item based on some conditions and their speed is changed as their target changes. It uses Canvas but that shouldn't be issue, you can duplicate same logic for html elements. Though feel free to ask if you have questions about certain parts in the demo.

Hm, it sounds like you might be running code outside the browser - is this server-side rendering or something? That error says it's looking for "navigator" (and failing), but that'd be present in the browser. Your imports look a bit odd to me - I'm curious what'd happen if you did it like: import Draggable from "gsap/Draggable"; Or if you really need the UMD version, that's fine: import Draggable from "gsap/umd/Draggable"; If you're still having trouble, please provide a reduced test case so we can see what's going on.

Good question. I'll see if I can better explain it. On the first two presses we add the 2vh vertical tweens and on press 3 the tween back to y:0 is added. But with rapid presses, the else statement continues to fire because the condition of (buttonPresses<3) is still falsy. So what happens is this tween tl.to('#redSquare', 1, {y:0, onComplete:resetTimeLine}); is added to the timeline as many times as you press and release a key. It's a duplicate tween so no animation will occur and the onComplete will fire and clear() the timeline when the first one completes thus clearing the duplicates. That's why everything works fine. Here's another fork of your demo with a getChildren() count. Try pressing rapidly during the animation and watch the timeline's child count go up. Does that make sense? How would you prevent the duplicates? That depends on your actual project. If you have a specific limit on the presses count, you could simply add an else if() to your statement. You could also set some sort of toggle that prevents additional tweens from being added. Hopefully that helps. Happy tweening.

I only mentioned killTweensOf() as a possibility because you said you just wanted to stop the element from animating. This method won't kill() the other timeline, but it can stop the element while it's animating. Something like this for example: function introAnim() { var tl = new TimelineMax(); tl.to(yourElement, 5, { x: 500 }); return tl; } function hideIntro() { TweenMax.killTweensOf(yourElement); var tl = new TimelineMax(); tl.to(yourElement, 1, { opacity: 0 }); return tl; } But this will not kill() the introAnim timeline so it's probably not what you needed. Happy tweening.

Oh wow, @Sahil, this totally makes sense now, with the use of scrollTo to trigger the scrollMagic with the nested timelines. Thanks so much for your help!

Glad to hear that you solved it. Thanks for letting us know and thank you for being a member of Club GreenSock. Happy tweening.

Yes! ?‍♀️?‍♀️?‍♀️ Thank you so much! @PointC

Thank you very much!! you saved me haha

I don't understand. What is your expected behavior and what problem you are facing?

You can update Draggable using timeline's progress. You might want to tweak some calculations but this should get you started. The onDrag calculation assumes your page only contains the draggable. Maybe you will be able to use Scene's enter event and some element's height to do the calculation if you will have other content on page.

Check out demos in following thread, you can achieve it with little bit changes.

Draggable has it's own x and y properties. So in situations where you animate element that is draggable, you might want to update draggable to reflect element's current x and y translate. You can do that using update method. Or you can apply bounds by passing first parameter to true. The second parameter is sticky which is useful when you change element's parent as you are dragging, if you set it to true then element will stick to pointer even if element's parent changes. I was creating a demo, but looks like @OSUblake responded already.

It's not common, but you'll know when to use it. Click anywhere to start dragging. It will move the box to your cursor. Now comment out this.update() and see what happens.

Hi @yulia , Again the hint: a CodePen would be very helpful. You may be able to try this: Everything you need can also be found in the docs. For example: .getLabelBefore () Happy tweening ... Mikel

I have just successfully combined Animate CC Canvas animation with Doubleclick Rich Media Studio served Dynamic content, using z-index. And I was able to incorporate all the DCRM stuff in an Animate publish template, so all the designers will be able to create their own DCRM creatives. Edited to add DCRM support are dicks when they find out you are using Canvas.

There is no need to use GWD for DoubleClick. The Banner requirements depend on which DC Environment you will upload your Banner Ads. There are: Double Click for Publishers DoubleClick Studio DoubleClick Campaign Manager Will you upload directly to DC Environment or are you or your Customer using a Third Party Template to upload your Banner Ads? If this is the case, there may be other banner specifications to follow.

You don't need to use GWD for DoubleClick. These are the steps you need: https://support.google.com/richmedia/answer/3526354 Full documentation: https://support.google.com/richmedia/answer/2691686 Hope it helps!

Howdy, Brad. I can't imagine that DoubleClick would require that ads be built in GWD. That'd be pretty shocking. I know that a ton of ad designers/developers like yourself love building things with GSAP alone, and I also know that DoubleClick (and every major ad network) not only accepts GSAP-based ads but GSAP is the only robust animation library that is whitelisted from file size calculations. So I'd be very surprised if you ran into any problems with pushing a GSAP-based ad through any of Google's ad channels. But again, I can't speak in any official capacity because I'm not Google and I don't really know much about their policies/requirements these days. Have you asked them directly? Perhaps one of the other ad gurus around here can chime in, like @ohem, @Oliver16Years, @davi, @volcanoflash, or @somnamblst. Good luck with the project!