Leaderboard

Please demonstrate the problem.

I'm very happy for Jack's recognition, because you can be sure, the way was long and work was hard, but I see you're paying off. But it was only possible because you and moderators created a beautiful and efficient tool, with a syntax that any layman can understand. Congratz to you guys for that. And today according to the system of the Forum I become Specialist (uhulllll), and helping others is the minimum when I see that I was helped by many here in the forum. And one day I'll be Superhero too hahahhaa ? So... Happy tweening!

That's not exactly a trivial task, but here's my crack at it: I built it out with ratios and variables to make it easier to port to whatever you're doing "for real". Does that help?

You don't need to load the CSSPlugin if you're loading TweenMax as it's included. https://greensock.com/tweenmax Draggable depends on the CSSPlugin, but you're loading it twice, which seems to be messing things up. And it seems to only cause problems when you load the CSSPlugin after Draggable. PROBLEM //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js OKAY //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js But again, you don't need to load the CSSPlugin if you're loading TweenMax.

For that you might be better off listening for clicks on the label... <li key="1"><label onClick={e => this.handleChange("check1")}><input name="check1" type="checkbox"/>Check1</label></li>

Don't dragClickables... Draggable.create(document.getElementById("wrapper"), { type: 'x', // dragClickables: true, throwProps: true, bounds: document.getElementById("container") }); And set your labels as clickable... <li key="1"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check1</label></li> <li key="2"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check2</label></li> <li key="3"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check3</label></li>

Hello @kresogalic, could you post a codepen from your replica attempt? But if it is animation with text, I believe that the demonstration below will give you an idea,} there are several ways to do it, that was the one I found easier. Using the GSAP SplitText Plugin. Look: Hope this helps you. ?

Hi @Anatol New to GSAP? You can tween the timeScale directly. TweenLite.to(myTimeline, duration, { timeScale: 0 }); Much simpler.

Hi, I'm reviving this old thread. I had the same problem, so here's a way to tween the timeScale of a timeline using TweenMax. In this way you can also set the ease for the timeScale increase/decrease or have an onComplete callback if you wish. Here's a Codepen. function tweenTimeScale( opt ) { const { timeline, duration, from, to, onComplete, onCompleteParams, onCompleteScope } = opt let { ease } = opt if ( !ease ) { ease = Linear.easeNone } const timeScale = { value: from } TweenMax.to( timeScale, duration, { value: to, ease, onComplete, onCompleteParams, onCompleteScope } ) var updateTimeScale = function() { // console.log( 'timeScale:', timeScale.value ) timeline.timeScale( timeScale.value ) if ( timeScale.value !== to ) { window.requestAnimationFrame( updateTimeScale ) } } window.requestAnimationFrame( updateTimeScale ) } Usage is quite straightforward: const tl = TimelineMax() tl.to( obj, 1, { rotation: 360, repeat: -1 } ) // etc. // e.g. slow the timeline to a halt over 3 seconds and pause it at the end tweenTimeScale( { timeline: tl, duration: 3, from: 1, to: 0, ease: Power2.easeOut, // optional onComplete: tl.pause, // optional onCompleteScope: tl, // optional } )

Another option is to simply create a tween, jump to time(0.00001) or something, and kill() it, like this:

Wow, that warms my heart, @Noturnoo! I had no idea. Sounds like you've come a long way, sir. Well done. And now you're even helping others in these forums with your knowledge. that's great!

Thanks Jack, but now there are only 900 likes left. hahahaha It is not very easy which shows how much you are all dedicated to helping Forum members.

I have no doubt about that. Congrats on earning "Specialist". We enjoy having you around here and I look forward to seeing your promotion to "Superhero" status

Thank you very much Blake! This fixed my problem in Firefox. I should have known this by thoroughly read through the online documentation. It would have saved me hours of trouble shooting on this case and another one I was about to post. Thanks, Stanley

Works fine for me.

Hi @elpeyotl, Or this from Jenkov (****). My workflow in short: Clean the source code of your svg images: svgomg New svg - starting with part '#total' Add the other parts (same viewbox) and group all their elements (<g> </ g>) The masks are hand coded - its easy if rectangles Important: The closer the color of the masking shape is to #ffffff (white), the more opaque the shape using the mask will be. Important: reference the mask ID attribute (e.g .: <g id = "total" mask = "url (#MaskTotal)">) Important: Series of parts. First #factory, then #total (transparent through the mask), ... last #oneStart (there is no z-index!) You can tween x, y, width, height ... of the masks. Orientate yourself by the dimensions of the viewBox = "0 0 232 232" #total: two separate masks half of the viewbox, the left is tweened by width, the rights by x-position Hope this helps you ... Mikel

It's not a bug. That's what happens when you interrupt a from animation. If the scale is at 0.1 when you interrupt the animation, it's going to animate the scale from 0 to 0.1. Try this. // You can set this when mounted TweenLite.set(".es-bubble", { transformOrigin: 'bottom bottom', }); TweenMax.staggerFromTo('.es-bubble', 1, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, ease: Elastic.easeOut, // force3D: true // doesn't work on SVG }, 0.1)

Many will say that it is impossible to learn GSAP without knowing a minimum of JS, but believe me I started my life as a developer (2016) by first tinkering with GSAP without knowing anything about HTML / CSS let alone JS. I've always been a designer and wanted to know how to make my sites, so I started using Adobe Muse (discontinued) that generates the site only using the visual mode, then I felt the need to use animated elements, I left for Adobe Edge Animate (discontinued too), but I still felt much lower than the animations of reference sites in Awwwards until I started to study how they did that animation and it was there that I came to the beloved GSAP, and believe me, I started to use GSAP without knowing anything about code, a video that helped me a lot it was the videos created by Petr Tichy (Link of videos), and also the moderators here of the forum because I asked a lot of questions since I did not understand anything of what I was doing hahahaha. Summary can be used however as Jack @GreenSock said, it is much harder, much better and more yummy when you know what you are doing. Good luck and remember: Learning is never too much. Ps .: Today I do everything in the manual hahahaha

This is the best I can do for you right now: for (var i = 0; i < 200; i++) { var p = new lib.Particle(); this.addChild(p); TweenMax.to(p, 1, {x:400 + Math.random() * 400, y:400 + Math.random() * 400, delay:i * 0.01, repeat:-1}) } particles.mp4 please see the attached fla. it should be a good start. simple-particles.zip

Another clean solution! Thanks, Jack.

Is this your problem? You're selecting all the buttons, so clicking stop will also run that function. $('button').click(function(){ });

Unless I'm missing something, I don't think it will do that. I just calculate it myself. Using the next control point will point it in the right direction. let bez = MorphSVGPlugin.pathDataToBezier(path); let rotation = Math.atan2(bez[1].y - bez[0].y, bez[1].x - bez[0].x) + "_rad"; TweenMax.set(plane,{x: bez[0].x, y: bez[0].y, rotation });

@mikel Thank you very very much for this explanations! Awsome. I'm tring to rebuild your codepen. struggling with the masks. Well I have to understand that clearly. But thtanks. way better approach with a big svg file, than extra divs and containers.

I would love to do that. First lesson. SVG is not magic. Under the hood, the browser renders SVGs using canvas drawing commands. ? Viewing the Layers panel in Chrome's dev tools. It's not same as HTML5 canvas, but the API is really close.

Yes, you need a server for AJAX to work.

Hi @elpeyotl, Inline SVG means many lines in the HTML, but is great to work on and looks perfect: Happy masking and tweening ... Mikel

I'm curious if there's a reason you're not simply nesting timelines. There are a lot of benefits to that, like being able to control the entire thing as a whole, scrubbing forwards or backwards, etc. Have you read this article?: https://css-tricks.com/writing-smarter-animation-code/ For example... var tl1 = new TimelineMax(); tl1.to(...); //add whatever tweens var tl2 = new TimelineMax(); tl2.to(...); //add whatever tweens var master = new TimelineMax(); master.add(tl1); master.add(tl2, "+=5"); //add after 5-second gap You don't have to add an empty tween to create the spacing either, as you seemed to mention in your post. You could just add a callback wherever you want: var tl = new TimelineMax(); tl.to(...); //add whatever tweens tl.add(yourFunction, "+=5"); //adds a function call after a 5-second gap You could use the call() method if you prefer. But if you really want to build things in a callback-driven way, I suppose you could do this: var tl = new TimelineMax({onComplete:function() { TweenLite.delayedCall(5, yourFunction); }}); (Though my personal opinion is that's the least elegant solution) Does that help?

hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!

Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:

Hi @fencepencil How about something like this? Does that help? Happy tweening.

Hi @peippo, I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value. You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60. Hope this helps!

For the most part, GreenSock is designed for animations that have known start and end states. With a plinko game the movement of the ball is always changing based on: x velocity, y velocity, gravity, friction and angle of collision with other objects. These types of animations are better suited for a physics engine which is what matter.js is. Your plinko demo uses matter.js and from what I can tell it is the right tool for the job. https://github.com/liabru/matter-js

Sure, this is totally doable. It looks like it's pretty much animating rotationX. Are you asking someone to build it for you? Based on your other post, I'm not quite sure what you're expecting. We're happy to answer GSAP-specific questions here, but we don't have the resources to do custom consulting work or build entire solutions out for people. Perhaps a good place to start is either some video courses (there are tons of options) or if you're in a time crunch, it may be time to hire an expert to show you the ropes (or do the project for you). Feel free to post in the Jobs & Freelance forum.

Was this it?

Just as a footnote here - smoothstate doesn't control the transition animations and it is really simple to use GSAP to do so. The repo mentions using velocity.js, but you can leverage the power of gsap. Smoothstate has onStart, and onReady functions so at it's most basic you can just add your transitions in there: var $page = $('#main'), options = { debug: true, prefetch: true, cacheLength: 2, onStart: { duration: 500, // Duration of our animation render: function ($container) { // Add your CSS animation reversing class $container.addClass('is-exiting'); TweenMax.to($container.find('.scene_element'), 0.5, {x: '-100%'}); } }, onReady: { duration: 0, render: function ($container, $newContent) { // Remove your CSS animation reversing class $container.removeClass('is-exiting'); // Inject the new content $container.html($newContent); TweenMax.from($container.find('.scene_element'), 0.5, {x: '100%'}); } } }, smoothState = $page.smoothState(options).data('smoothState'); Obviously, you could get much more creative - use a reversed timeline or whatever.

Hi deanpien in addition to Carl great advise , you can do like this too : part1.to("#greenBox", 1, {x:550, rotation:360}) .to("#purpleBox", 1, {x:550, rotation:-360}, "+=0.2") .add(function(){ part1.timeScale(part1.timeScale()+ 0.5) /* or part1.timeScale(part1.timeScale()*2) */ })

Thanks for the demo. One option is to call an outside function onRepeat to tween the timeScale http://codepen.io/GreenSock/pen/pJEGWb?editors=001 But I would probably do something like this: var part1 = new TimelineMax() part1.to("#greenBox", 1, {x:550, rotation:360}) .to("#purpleBox", 1, {x:550, rotation:-360}, "+=0.2") var main = new TimelineMax(); main.add(part1.tweenFromTo(0, part1.duration())) .add(part1.tweenFromTo(0, part1.duration()).timeScale(2)) .add(part1.tweenFromTo(0, part1.duration()).timeScale(4)) $("#restart").click(function () { main.restart(); }); http://codepen.io/GreenSock/pen/rVMPGm?editors=001 Basically your main timeline has 3 tweens that scrub through part1's timeline at different speeds.