Leaderboard

Hi, Is not very easy to get an idea of what exactly you want to do (for me at least), without a live sample to test and modify. Please try to provide a codepen sample using this base for the Morph SVG Plugin: Based on what you've posted the first idea that comes to my mind is using the mouse position to update the timeScale property of a TweenMax instance (in order to use the repeat: -1 and yoyo properties of that particular class): https://greensock.com/docs/TweenMax/timeScale() Here is an approximation of an element in the center of the screen (using flex) with an endless pulse animation. The animation's timescale is updated on the mouse move event attached to the document: Hopefully this is enough to get you started. Happy tweening!!

Thanks ? I started out learning how to make games instead of websites, and I think that has helped the most. Game development takes user interaction, animation, and performance to a whole other level. I've learned a lot from Keith Peters with his Coding Math videos and HTML5 Animation with JavaScript book. https://www.youtube.com/user/codingmath http://lamberta.github.io/html5-animation/ And from Daniel Shiffman with his Coding Train videos and Nature of Code book. The Nature of Code uses the Processing language, but it's pretty easy to understand and convert to JavaScript. https://thecodingtrain.com/ https://www.youtube.com/user/shiffman https://natureofcode.com/ I would also recommend making a bunch of pointless things. It might like sound like a waste of time, but that's where most of my skills come from. I really like the point Steve Gardner makes in this video about making pointless things. If his mission was to create pop.svg before he made all the pointless things, he couldn't do it. It's the journey of making pointless things that got him to pop.svg. That got me thinking about all the pointless things I've made on CodePen. I've never checked before, but I sure do have a lot. I couldn't find a way to get the number of pens I've made, but 116 is the last page, and there are 25 pens on every page, so around 2900 pens. If I only had 50 pens, I would probably be pretty lame, worrying about stupid stuff like "which framework should I use, and does it have hooks?" So that's the journey of what got me to where I'm at, making games and pointless things.

Yeah, you can only morph one path (shape) into another - not a bunch of paths into one path. The solution @mikel offered looks pretty good; alternatively, you could combine their shapes into one outline, cross-fade them, and just morph that one thing into hulk, like this: Does that help at all? Or were you asking how to adjust the artwork so the "man" and the "hulk" are both similar sizes? If so, that'd be easiest by just editing the original artwork.

Hi @OSUblake Thank you for your reply, it helped me a lot, great explanation! Here is what i did, I created a master timeline and wrote all the animation inside separate functions with timeline for each and finally added it to the master timeline using the master_timeline.add(function_name()) method. it is demonstrated in your demo here: Mine edited: Thank you so much for you help!!

I wasn't sure how you wanted the animations to play because it looked like you wanted to use the building's position as way to determine which timeline should be playing. if(memory_building_position >= main_character.offset().left ){ //timeline one is over now need to play second timeline while it is binded to the scrollbar } So the reason I said rotating the building might mess stuff up is that position values like .offset().left are based on an element's bounding box, which will change during rotation, even on a circle. Knowing that you want animations to play like ScrollMagic, you don't need to worry about the building's position. A simple way to do scroll timelines is to use a height value for the duration, and a top/y for value for timeline position parameter. Then all you have to do is pass in the window's scroll value to the timeline's .time() method. You could do that with a master timeline. Just put all your timeline scenes on the master timeline, and pass in the time value to the master timeline. I did something like that here.

Sorry, I'm not familiar with lottie.js or bodymovin', and they are not GreenSock products. This probably isn't the best place for questions about those tools. If you have a question related to the GSAP API, we'll do our best to help.

I'm not sure I follow your question - are you asking how to use GSAP to scroll a page, but delay it for a short time?

Yes, _timeScale is a private backing value that gets set by the .timeScale() method, so it wasn't being updated correctly. It might not be obvious, but the tween is actually calling the .timeScale() method here. It's really not documented anywhere, but you can animate function based getters/setters, which is what the .timeScale() method is. So you can animate any tween/timeline method that gets and sets a number value, like .progress() and .time(). TweenLite.to(myTimeline, duration, { timeScale: 0 // calls myTimeline.timeScale() method }); An old demo showing different different ways to create getters/setters that GSAP can use. Box 4 is how most GSAP methods work.

Hi, Regardless you will want to store the instance names of all your MovieClips in an array and then use that array as the target of a staggerTo like var myClips = [mc1, mc2, mc3]; TweenMax.staggerTo(myClips, 1, {x:100}, 02); I'm not sure from your post if you are using ActionScript or JavaScript. They are both similar but it would help to know for sure for us to provide the best answer.

@mikel That's a great, concise example and I learned quite a lot from it. Thank you. @OSUblake Wow thanks for the different examples. That Bezier example is impressive. Really big thanks for your help.

A better version. Uses the BezierPlugin for more natural looking movement. Best viewed on CodePen. The embedded pen isn't large enough to see.

@mikel's got the right idea. There's no rule that says you have to use same element. Check out how I'm using 3 different elements to pull off a full screen animation here. A "from" element, a "to" element, and a clone to animate between the two elements. Another option is to reparent your element. The transition is completely seamless.

Hi @greykrav, The SVG looks a bit strange ... The position of the morph aligns with the source object. In this pen only one path is selected as the starting object and it is set 200px down and the rest of the MAN will be hidden. Plus: SVG overflow:visible; Does this help?

@OSUblake THANK YOU for wasting your time with the new age stuff! It is a miracle like everything else you do with tweens! Tell me please, if it is not a secret, what should I learn, what books I have to read, what road I have to followed to become a magician like you?

You'll see in my example above that I used a background rectangle set to the same dimensions as the SVG (1000x500). Always start every AI --> SVG project with a background rectangle the same size as the SVG. You can delete it once you export, but it will keep everything sized properly and your coordinates will be where you expect. I talked a bit about this technique here:

Hi @namisuki I added an info panel to your demo so you can see what's going. It makes debugging a lot easier. Before getting to the switching of the timeline part, there are some issues/questions you should look at first. Your check for the collision will never be true. It's a pixel short because of the border. Notice in my code how I'm adding 151 instead of 150. Are the animation/timeline changes supposed to happen only once, or every time the scroll position passes a certain break point? For example, if the second timeline is playing, and you scroll up, should it switch back to the first timeline? If so, rotating the building will cause the building's left positional value to change, which might mess stuff up. And what progress value are you going to feed to the second timeline? You can see that the window scroll value goes above 1 after the boxes are colliding. Progress should be a value from 0 to 1.

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