Leaderboard

You were using really old version of TweenMax, I updated it to latest version and it fixed the issue on chrome.

Hi and welcome to the GreenSock forums, You should be able to do exactly what you need with GSAP. You can try all of our premium plugins for free on CodePen: here is something I whipped together quickly In the demo above "tween" could be an elaborate timeline of multiple animations and you would have the same control.

Check the following thread it has similar examples, As for your shape morphing like that, morphing depends on how your shapes are built and position of both elements, check @PointC's examples in that thread and you will get some idea about how to create your paths.

Hey @carljohnston.uk! Yes, But... Inside the Tween/Timeline, this refers to the Tween/Timeline itself, not to the element being targeted. You'll probably will want to use function based values ini order to target the individual element. Check the bellow blog post as it should give you some ideas on what can be done: https://greensock.com/1-19-0/

That's pretty weird, but believe it or not it's totally unrelated to GSAP. It seems like you've got an edge case with your artwork that exposes a rendering issue in the browser when it reaches exactly opacity:1 and the browser snaps it into a different state. The solution is to animate to an opacity of something like 0.99 instead of 1 so that the browser doesn't do that weird snapping thing with the way it renders it graphically. So you could do a fromTo() tween that goes from opacity:0 to opacity:0.99 for example.

You can pass an array of parameters as third argument. TweenMax.delayedCall(2, functionName, ['first', 20]); https://greensock.com/docs/TweenMax/static.delayedCall()

Not sure I fully understand. To animate the words in a single line you can target that line using a linesClass var mySplitText = new SplitText("#quote", {type:"lines, words", linesClass:"lines++"}), tl = new TimelineLite(); //animate only the words in the first line tl.staggerFrom(".lines1 div", 0.5, {opacity:0, scale:0}, 0.2)

You can use xPercent to animate element relative to it's own width and yPercent for height. Also, in demo there is commented code if you wanted to increment x by 20 for each element.

Thanks for the demo. There isn't anything in Draggable that is going to do that for you. Since each year is in a draggable container you are probably going to have to create a clone of the element you click on place it in the DOM outside of #timeline like on the body convert the element's coordinates from where it was inside of timeline to where it should be on the body. if the year you clicked on had an x of 400 and #timeline was moved 300px to the left you would have to place it in the body at x:100 figure out the x,y of the center of the window tween the cloned element to the x,y of the center of the window This thread here has some demos that show how to clone elements: Unfortunately this isn't something I can build out as 90% of it is beyond the scope of GSAP's capabilities, but hopefully this gives you an idea of what to try.

Some browsers won't honor transforms on <span> elements (well, anything with display:inline I believe). That's why SplitText uses <divs> by default You might want to check out https://greensock.com/splittext/ (though it may be overkill for what you're doing, and it is only for Club GreenSock members). So again, the issue is applying transforms to inline elements (spans). Once you fix that, it should work great.

I think this should work for you. Happy tweening.

Ah! Found it -- force3D:true I guess it was 3Dish. I don't think I was using 3D transforms at the time, but it helped steady the animation. I found it in a LinkedIn messaging board. Just remember I shared it with a previous co-worker. Glad I did. It's not in the CSS reference I found online. You've probably used it before but if not, feel free to give it a go. I can't remember what I was working on at the time but it fixed some glitchy wonkiness were were trying to solve at the time. Best,

I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.

Looks like you've got an iframe inside an iframe inside an iframe (or something like that). Not that it's "wrong" or anything. And z-index on stuff is set to 2147483647 which I find rather interesting. I don't have time to dig into all the code (there's a LOT of it), but it sounds like you need to talk to whoever is controlling that top-most page. Ads probably won't be allowed to reach out of their iframe and programmatically scroll the parent(s). That'd be a security issue. So even though GSAP's ScrollToPlugin can indeed scroll a page easily, I'm not sure it's realistic here. If I were you, I'd share my concerns with the controller of that top-level page and iron things out properly rather than doing a hacky duct-tape "fix", because it may get weird if they eventually fix their JS and then suddenly in Chrome your ad scrolls the whole page down too far. See what I mean?

Perfect! Don't know why I was using such an old version, I think I forked it from one of the official GSAP pens. Thanks very much for your help

Great stuff as usual, @PointC! Thanks for sharing the tips.

Thank you Sahil, it helped me a lot.

force3D is a property specific to our CSSPlugin, which basically allows the engine to optimize performance of transforms. You can read about it here: https://greensock.com/docs/Plugins/CSSPlugin#force3D

@Sahil, Thank you for the help. Certainly @Dipscom's answer has opened up plenty of possibilities, including the solution you've provided. Thank you both for the help!

@carljohnston.uk After reading Dipscom's answer I had deleted mine, but in case of stagger tweens, index is returned as zero for all elements so you may still want to use following solution. You will have to pass an array of elements and access them by incrementing index.

I updated the pen (and the code in the OP) because I was annoyed that you could only ever pass "static" parameters to your debounced function. So now if you don't set the params property (or set it to null later), the function is passed the event's data, which allows you to test against mouse position, window size, key code etc. Check out the update codepen above for a cool moving box

This should get you going in the right direction demonstrates a basic example how to attach scrollTo plugin to scrollMagic. Within the function where the scrollTo tween is fired you should be able to place any other animation you want to run. It seems to be limited to only running once and doesn't auto reverse like scroll majic usually does. Off hand I'm not sure why you'll have to investigate scroll majic parameters it could be related to the way pins work. There's probably a way to reset it.

okay okay thanks! Spans are usually inline but I changed it to inline-block and it worked fine. Thank you. I can also use divs but even then have to switch to inline-block if I want side by side or.. display flex with flex-direction row.. that will work too. Thank you! Hope you are having a great day!

Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!

Hi @flash08 I'm not sure, but I think you're asking how far along the x axis to place those other divs so they're off the screen at the beginning of the anmation? If that's the question, you could just check the width like this: var ww = window.innerWidth; Then just use that value in your tweens instead of your hard coded 960px. Hopefully that helps. Happy tweening.

That's called a closure. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Awesome solution, Blake! to take it an inch further I would suggest defining and building the timeline outside the timelinePromise() function so that you can pass any animation (tween or timeline) into it var t = new TimelineLite({paused: true}); t.to($(".testing"), 1, {width: 200,height: 200}); var timelinePromise = function(timeline) { return new Promise(function(resolve) { //alternate syntax for adding a callback timeline.eventCallback("onComplete", function() { console.log('on complete resolving') resolve(true) }) }); } //pass any animation into timelinePromise timelinePromise(t).then(function(res) { console.log('promise resolved') });

Not sure what you're trying to do, but why don't you just create the timeline outside the promise if you want to access it? http://codepen.io/osublake/pen/b4c2aada8cb7c5d1672bc41634ce4074?editors=0010 And check these out... Extensive use of promises using Q http://codepen.io/ThomasBurleson/pen/jEyjrd?editors=0010 GSAP Promise wrapper using Bluebird https://github.com/mattdesl/gsap-promise