Leaderboard

Hi @lichunbin814, Welcome to GreenSock Forums. Please look at these tips: https://greensock.com/svg-tips Special: transformOrigin. Here is only an approximate direction: Happy tweening ... Best regards Mikel

Believe it or not, the trick here is the easing! I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here What you'd want to focus on is the ease: Elastic.easeInOut.config(8, 0) For your case, "8" might be too much ... so modify that to get the right feel for your project.

Another option would be to actually create the DOM text elements instead of Animate CC dynamic text and control it along with other Animate CC objects, if need be (like if the text is nested in another container), via EaselJS's DOMElement class. In this case, the TextPlugin would work as normal (or should technically :). So basically create text div's in the same div as the canvas element and treat it as another layer in canvas.

Hi @jesper.landberg, Could you set up a reduced case example? I am guessing you are using Vue.js but regardless it will be pretty hard to help without seeing what's going wrong.

Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.

There is some overlap between CSS properties and SVG attributes so it can be a bit confusing. Check out Jack's answer here: Here are the docs for the attribute plugin. https://greensock.com/docs/Plugins/AttrPlugin Happy tweening.

@mi_cky This is an SVG thing ... https://greensock.com/svg-tips#6rN7CWTfF0ZzR1wib1l3

You're setting an attribute. Please try it like this: TweenMax.set (".T_Range", {attr:{ x: minrange, width: maxrange - minrange }}); Happy tweening.

You can just listen for enter/leave events. Happy tweening.

You'll be using the .pause(), .play() or .resume() methods depending on the situation. You should see a significant improvement if you only have the visible elements animating. And it is perfectly feasible to achieve that with ScrollMagic, there are several discussions here on the forums on different ways of playing and pausing tweens with it.

Yes, it will. You said yourself you are using functions to create the original tweens. It would be a matter of calling those functions again when you hit the desired triggers. Having said that, depending on the complexity of your animations, it's not great to be recreating them all the time. In your situation, I would simply create references to the tween/timelines from the functions and pause/unpause whenever the need arises. Have a look at this brand spanking new post and videos if you need some guidance on how to structure complex animation. https://css-tricks.com/writing-smarter-animation-code/

Oh wait it looks like you actually want the classNames which are strings that contain numbers to be rounded so that somehow you animate through multiple classes. Sorry, you can't use RoundPropsPlugin for that. You may have to create a loop that set()s a new class at certain intervals.

Thankyou so much @Sahil this really helped me implementing the effect. Thankyou

Hello @venn This happens due to the nature of the two mouse events you are using .. mouseover and mouseout. Both mouseover and mouseout will trigger event bubbling down the DOM to its children. That is why you see it (#container) firing again when you enter its child (.slide) with your mouse. To get around this you can either keep using mouseover and mouseout and use event.stopPropigation(). Or the better way is to just use mouseenter and mouseleave. So instead use mouseenter instead of mouseover. And use mouseleave instead of mouseout. The below example uses mouseenter and mouseleave. And when you look in the console, you can see it only fires once: Happy Tweening!

Hello @9lines and Welcome to the GreenSock Forum! Sorry your having an issue! I'm a little confused in why your using roundProps alone with just className? But to better help you, please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. Once we test your code in a live editable environment we can debug in the browser to find out why this is happening Thanks

...steps out of the shadows... I think it was four years since my last post. I was an as2 and then as3 lib user back in the good ol days of Flash. Great post.

Yes indeed, TextPlugin is for DOM elements but it sounds like you're trying to edit a canvas-based proprietary Adobe object instead. One possible solution would be to create an invisible DOM element (display:none) and tween the text there using TextPlugin and then in an onUpdate, copy the text from there to your Adobe object.

@mi_cky Because Chrome lets you get away with a lot of craziness sometimes, but just because it works now doesn't mean it will work in the next release. As the Good Sir @Jonathan will tell you, he tests in Firefox first because that follows the spec. @Shaun Gorneau - it's Friday so that's completely understandable.

Ah, @PointC! I completely ignored that this was a SVG attribute

I wouldn't call it a simple and normal cursor... Anyway, I do find this an interesting challenge and although I can't sink my teeth into it right now, I'll make a more detailed example for you at some point over the weekend. Will that be ok?

Allow me to have a stab at it: There are a few things to consider: 1) You might not want to be generating a new geometry at each tick. Better to have them all generated to begin with and then just animate their properties if you have a set, limited number of them. 2) You will need to create a material for each of the individual meshes that you want animated separately. Because if you are linking all meshes to a single material, when you change any of that material's property, you will affect all linked meshes. Do forgive if I missed some detail but I'm short on time today. Hope this is helpful.

Hi and welcome to the GreenSock forums, Thanks for the clear and reduced demo. Very helpful. Yes, when a tween reverses() it honors the ease you gave it. So if a tween bounces at the end, logic implies that when the playhead moves back through that tween it will go backwards through the bounce part first. There is one exception to this rule, and that is if you have a repeating tween that yoyo's you can specify a separate yoyoEase as explained here: https://greensock.com/1-20-0 Tweens and timelines are linear. Think of watching a movie. If you watch scene1, scene2 and then scene3 and hit reverse you'll watch through scene3, scene2, and scene1. In addition to wanting the ease to be different on "reverse" it seems you are also switching the order of the animations. Forward: Red then blue Reverse: Red then blue In this case a simple reverse will not work. These are completely unique sequences. My solution is to create the timelines that you need when you need them: Please see this fork of your demo: Only hit the buttons when the previous animation has finished. I think it does what you want. The down side is that if you click while an animation is playing you may get some expected but undesired results. I made the blue tween really slow to help illustrate this. re-run the demo click "start tween" when the blue box starts shrinking click "tween back" the blue box will stop shrinking the red box will shrink then the blue box will continue shrinking Again, since you are changing the order for the "reverse" effect, it may be visually jarring / awkward. If the animation is fast enough, perhaps not. You may also notice if you click the "tween back" button very quickly when blue starts shrinking, lets say 0.1 seconds after the it starts animating (so its only shrunk by a tiny bit) when blue starts going back to "normal" size it is still going to take 3 seconds to grow that tiny amount. I think the best result for you is to use the unique eases you want in the close() animation but don't mess with the order of the tweens. If red plays first on open, have it play last on close. You may notice that in my solution I'm using functions to create and return timelines. This is particularly helpful because we need the same timeline delivered repeatedly on demand. To find out more about using functions to return timelines check out: https://css-tricks.com/writing-smarter-animation-code/

Hello, Please keep in mind that tutorial is 7 years old. Since that tutorial was created Adobe has abandoned Flash and GreenSock has moved away from AS3 tooling. It looks to me that you will need to format that code as class or document class: https://code.tutsplus.com/tutorials/how-to-use-a-document-class-in-flash--active-3233 if you want to load it externally. For general AS3 help, check out the Adobe AS3 forums.

As Jonathan suggested a CodePen always helps, but I'm 99% certain roundProps isn't designed to round every property associate with a class. Best to specify the value you want tweened and rounded in the vars object.

Hello, Thanks for you quick answer. I found the solution by using jQuery(document).ready() method Thank you

Hi Paul, Welcome to the GreenSock forums. There are too many things that be causing this that we can't properly diagnose from the code snippet provided. Please fork the CodePen demo below (it loads SplitText and TweenMax) and try to replicate your error with as little html, css, js as possible. I would suggest removing all the code related to whatever scroll library you are using so that we can verify that things work without that. Once we can verify the basic animation, you can start adding in more complexity. - run pen - edit on codepen - fork - add your code - save - send us a link to your pen that clearly shows the error More info on using CodePen: Thanks!

Hey there! If you keep track of your elements, you can kill all of their tweens once they reach a particular point of your choosing with .killTweensOf() method.

My experience is limited with GWD but there's very little room to add extras. I can't remember from the top of my head if you can include google white-listed scripts in it but if you can, you will be able to use GSAP with it and their javaScript editor.

Hello @Varinator! Please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Kind regards Mikel

@OSUblake Here's what I am currently fiddling with: It's a bit messy since I've been tested different approaches but I am able to get it to run based off the audio frequency data. I am unable to demo a working example of it using the web audio api since I don't have any sources for an audio file. Currently figuring out how to apply gravity and particle splitting. Not going ass smooth as I had hope but I'll try and update the pen should I make any progress. Edit: The current example using the audio frequency data on my end has a better fountain effect than the one on the pen. I am not sure if there are any available sources for linking mp3 files without stealing bandwidth of the owners.

Oh, absolutely. If I understand you correctly, you can already do that. Simply define it as the "animation", like: var tl = new TimelineLite(); tl.to(...); ... GSDevTools.create({ animation: tl, globalSync: false }); Is that what you mean? GSDevTools doesn't need to be just wired up to the root/global timeline at all. You can point it at any animation (tween, timeline, whatever). Does that help?

Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there. At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array. Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there. At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array. if you add the console.log as shown below you will see how quickly it gets out of control. function newBlips() { var i; const mesh = new THREE.Mesh(geometry, material); mesh.position.set(rand(-1000, window.innerWidth), rand(-500, window.innerHeight), -1000); scene.add(mesh); blips.push(mesh); for (i=0; i < blips.length; i++) { console.log("no!!!") TweenMax.to(blips[i].material, 3, {opacity: 0, ease:Power2.easeOut}, 0.2); } } Definitely get rid of that loop. You should only need one tween per mesh after it is created. I don't think you want to call newBlips on each render either.

Sure, feel free to post the most reduced test case possible. I'd be happy to take a peek. Disclaimer: I know absolutely nothing about Vue, so if there's any way you could just use vanilla JS, that'll greatly increase the chances of me getting you a decent answer

Yeah - my fault. I should have asked if you were familiar with the setPin() method first. Here's a link to the docs for it: http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin Happy tweening.

In addition to the advice above, I'll offer one piece that helped me. I started by copying and pasting tweens from the work of other members. That's fine for your first few, but after that, you'll learn more by typing out every character of every tween. It gives you a better feel for the syntax and you're going to make mistakes. You'll invariably miss a comma or semicolon and sometimes forget to close your curly braces. This will cause errors that will need to be fixed in order for everything to work. Those mistakes will teach you a lot more than having everything work perfectly from a copy and paste. Just my two cents worth. Happy tweening.

HI @thatkookooguy If I understand your question correctly, then - yes - setting immediateRender to false should take care of that problem for you. .set('.hero-fight-parallax.fixed', {display: 'block', immediateRender:false}) Hopefully that helps. Happy tweening.

Can you post a demo? I think your implementation can be achieved with very few lines. It will also be better for you to get your own code refactored and see how something can be achieved. Follow this thread and create a simple demo with limited code that demonstrates your problem.

Following is demo I created today for parallax effect which triggers after mousemove event ends with slight delay of 200 milliseconds. You can apply similar logic along with ScrollMagic to get desired effect. Right now checking on mobile, you can see that once event ends there is slight odd movement by elements that indicates that easing effect is added when scroll ends.

Just came across this example:

Hi, Isn't that plugin for HTML DOM only?

Yep. That's to be expected. ScrollMagic doesn't know about the animation, and is getting the scroll position like it normally does, but that's not correct. The value ScrollMagic is using is the end value, not the current value, so it's out of sync. I have some other things I need to do, but I will make a demo later on showing you how to get the smooth parallax working with that code.

You've got it. Preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js You can define autoScrollMarginTop, autoScrollMarginBottom, autoScrollMarginLeft, and/or autoScrollMarginRight. Is that what you're looking for?

Glad you figured it out, Happy Tweening!

I've found the answer! As it turns out a plugin (LayerSlider WP) I believe also uses Greensock, so WordPress was loading it twice. I deactivated LayerSlider and no more errors!!! Hopefully this will help anyone else using GSAP with WordPress. By the way, thanks for the great support.