PointC

Hi martis I'd recommend talking a look at ScrollMagic. It's great for that kind of site. http://scrollmagic.io/ Check out Petr Tichy's site for a lot of great info, tutorials and classes about it. He's a great teacher. https://ihatetomatoes.net/ https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/ https://ihatetomatoes.net/5-days-with-scrollmagic/ Hopefully that helps. Happy tweening.

Hi Technics1210 Have you tried starting with the text at the largest size you will need, set() it to something like scale:0.25 at the beginning and then scale up to 1? I find it's generally much easier to get good results starting with something a bit too big and scaling down rather than trying to scale up. It might be worth a try. Happy tweening.

o.k. - It sounds like you'd want to set up a 'resize' listener and calculate some new values. You'd then create a new tween to overwrite the old one or you have the option to kill() it as well.

Hi qarlo You're right - you have to get new values for the window width so everything works correctly. I moved your window calculations and tween into a function that will play on page load as well as a click of the repeat button. function moveIt() { var windowWidth = $(window).width(); var distance = $('.img-wrap').width() - windowWidth; TweenMax.fromTo(".img-wrap", 5,{x:0} ,{x:-distance, ease:Power3.easeInOut}); } Here's a fork of your pen with that option: http://codepen.io/PointC/pen/VjWWaJ/ Hopefully that helps a bit. Happy tweening.

o.k. - I'll throw my 2 cents worth out here too. I made a little CodePen for you to see the difference. It has two squares with a child square in each. One is an SVG with a child rectangle and the other one is made of two simple divs. You'll see in all browsers that the SVG itself will rotate just like the plain parent div. The child div and child rectangle behave differently. In Chrome, the rectangle in the SVG kind of animates, but it looks more like it's scaling from the center and then back out. In FF and Edge, it doesn't even appear to move. http://codepen.io/PointC/pen/bZWqGj/ I know it's not what you want to hear, but Jonathan is absolutely right. You'll have to wait for SVG 2.0 or go with Blake's suggestion of Three.js. Happy tweening.

Yep - I see the same thing Jonathan is seeing. No flicker at all, but the divs snap at the end of their rotation. I tested in FF, Chrome and Edge. Windows 10.

HI Meds86 Welcome to the GreenSock forums. There are a few problems to correct, but we can get you there. 1. You need to load TweenMax and the DrawSVG plugin. You can click the little gear icon in the JS panel and load your scripts. ...or the easiest thing to do is fork this GS demo which loads all the plugins for you. http://codepen.io/GreenSock/pen/OPqpRJ 2. I see in your CSS that you're trying to add a stroke to everything which can work, but you're targeting a class of .path rather than the paths in the SVG. You can target all of those like this: #Layer_1 path { stroke-width: 3px; stroke: red; } 3. The last thing is the size of your SVG (93x93). Adding a 3px stroke on that is going to look pretty thick. I forked your pen and changed it to a 0.5px stroke so you can see that everything does indeed work, but probably not the result you were looking for. http://codepen.io/PointC/pen/KrmKQB You'll probably need to rework your SVG a bit to get what you want here. I'd recommend starting at a larger size when you do that. Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi gilesht Welcome to the GreenSock forums. The x and y is going to be relative to the SVG rather than screen size. Unless you tell it otherwise, the SVG will stretch out to 100% of the available width. In your example, you're setting the width to 600 and the height to 207, but try this: remove the width and height from the SVG and change the window size. You'll see that the SVG will shrink and grow to 100%, but your animation will still play perfectly at any window width. I made a CodePen as an answer to another question a few months ago, but it could also be helpful here. It has the same SVG displayed three times at different sizes, but the same x/y animation plays in all three and the positioning is correct at each size. http://codepen.io/PointC/pen/QyjMaW Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi Ritch.b You can't just drop a div ID or class in there because the animation engine needs a number, but you can easily get that number by figuring out the offset from the top. // via jQuery $("#yourElement").offset().top // or plain JavaScript document.getElementById("yourElement").offsetTop I've made a simple CodePen for you to see how that could work. http://codepen.io/PointC/pen/LkyPvv Hopefully that helps. Happy scrolling.

Hi phantomboogie That quick flash can be eliminated by setting the visibility of your SVG to hidden in your CSS. Then you can bring it back via a set() of the autoAlpha to 1 before animation. // hide it #yourSVG { visibility:hidden; } // bring it back right before the animation TweenMax.set("#yourSVG", {autoAlpha:1}) Hopefully that helps. Happy tweening.

ha! Of course fromTo would be better. What was I thinking? I probably shouldn't be answering questions before a morning dose of caffeine.

Hi resting Welcome to the GreenSock forums. I'm not sure I understand your question, but based on your pen, you want box1 and box2 to move 200px and then you want box 1 to move exactly the same way again? If that's what you want, you have some options. You could set() box1 back to a position of 0 and then animate it 200px again. I'd probably use clearProps to clear everything from box1 and then you can animate it again. Either way will create a jump back to an x position of 0. t1.to(b1, 1, {x:200}) .to(b2, 1, {x:200}) .set(b1,{clearProps:"all"}) // this will jump it back to 0 .to(b1, 1, {x:200}); Here's a fork of your pen. http://codepen.io/PointC/pen/wWJNEz If I've misunderstood what you meant, please add some more details to your question. Happy tweening.

Hi swampthang Looks like you're loading an older version of TweenMax (1.14.2). I switched your pen to 1.18.5 and it worked fine for me. You also don't need to load the AttrPlugin as it's already loaded with TweenMax. Edit: dang it Blake. Mr. Fast Typist.

o.k. - since you want them all to animate on the y axis in the same way, we won't need to use the cycle property. You can go back to a regular stagger. Here's the code: tl.staggerFrom(".box", 1, { y:400, autoAlpha:0 },3) tl.staggerTo(".box", 1, { y:-400, autoAlpha:0 },3,2) tl.from(".lastBox", 1, {y:400}) My revised pen: http://codepen.io/PointC/pen/GqWxgj/ Does that help? Happy tweening.

In that case, you'd want to take advantage of the cycle property. tl.staggerFrom(".box", 1, { cycle:{ x:[ -400,400,0,0 ],y:[0,0,-400,400] } },3) tl.staggerTo(".box", 1, { cycle:{ x:[ 400,-400,0,0 ],y:[0,0,400,-400] },autoAlpha:0 },3,2) tl.from(".lastBox", 1, {x:400}) Here's a revised pen: http://codepen.io/PointC/pen/jrBqWV/ More info about cycle and stagger: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/ Happy tweening.

An easy way would be to take the last image out of your stagger tween and animate it by itself when the stagger has completed. Here's a revised pen: http://codepen.io/PointC/pen/aZJdxE/ Happy tweening.

Hi cwiens@shutterfly.com I'm not sure if you have a typo in your question or that's the actual code you're using, but thought I'd look at the obvious first: //you have var mainTimeline = new TimelineMax(repeat:2, repeatDelay:20); // but it should be var mainTimeline = new TimelineMax({repeat:2, repeatDelay:20}); Other than that, I'd have to see a CodePen to be of any help. Happy tweening.

Yeah, it's not always obvious that you need that file and it seems hard to find sometimes. It's used to trigger tweens or sync them to the scrollbar. You are correct - it is a ScrollMagic file. Here are the docs. http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.

I still didn't see the morphSVG plugin in your demo so you need to add that and you'll need one additional file as well. Click the little gear icon on the JS panel and add each of these to your demo and it all should work correctly. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js Note: you may have to add some margin below the SVG so the trigger can be reached on scroll. Hopefully that helps.

Hi samsam Welcome to the GS forums. Your pen isn't loading the Draggable plugin. It might be easiest for you to fork this GreenSock pen: http://codepen.io/GreenSock/pen/OPqpRJ It loads everything including the member plugins so you can give them a test drive. Just an FYI - you don't need the head elements or body tag on CodePen - it takes care of that for you and the JavaScript should go in the JS panel down below. Hopefully that gets you started. Happy tweening and welcome aboard.

Hi jeansandjacktrequired Welcome to the GreenSock forums. This sounds like a good job for the staggerTo() method: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/ You can give all of your images or divs the same class and then easily stagger them on and off screen. By using the same class for all of them you avoid all the additional variables and you can add/remove images without having to make any changes to the animation. I made a really simple pen so you can see how this could work for you: http://codepen.io/PointC/pen/XKMbzY/ Hopefully that helps. If you have any additional question, please make a simple CodePen for us so we can more quickly find the problem and/or offer suggestions. Here's how to make a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.

Hi Ritch.b You've got a few things to correct here. First, the morph plugin isn't loaded in your pen. You can load the CodePen version with this link: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js The next problem is setting up your timeline: //switch this var menurb = new TweenMax(); //to this var menurb = new TimelineMax(); If you make those changes, you will see a morph-like animation, but I don't think this will give you the results you're probably looking to achieve. Your #combine path is an exact copy of the other two groups only with a black fill instead of blue. The other two groups are made up of 10+ paths with classes of .st0 and .st1. You're animating each of those little paths into your #combine path so this isn't ideal. As I mentioned, you'll see a something happening, but it looks more like a jumbled blob than an actual morph. MorphSVG works path to path so you want a corresponding end path for each start path to get a nice animation. Your SVG is a bit confusing too. You've got classes of .st0 and .st1 as well as group IDs of #st0 and #st1 so it's a bit hard to follow. The .st0 class is also applied to the #combine path and then you're morphing the .sto and .st1 class into the #combine path so it's trying to morph into itself. I'd recommend using more meaningful names to make your work a bit easier. I know AI spits out SVGs with generic names like that, but you can fix them manually. With the two start groups having the same shape as the combined end path, I'm not sure what the desired end result is here either. Hopefully this helps a little bit. I'd offer more, but I'm not 100% sure what you're trying to make happen here. Happy morphing.

Hi ErraticFox Welcome to the GreenSock forums. It's a bit difficult to say what the problem might be without seeing some code. To get you the best answers, we ask that you create a CodePen demo for us. Please follow the link below to see about doing that. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Once you have that available, everyone around here will be happy to assist you. Happy tweening.

Hi iamacatperson The easiest way to make that happen is by adding a delay to the timeline: tlAnim = new TimelineMax({paused:true, delay:0.5}); Happy tweening.

Hi Vector You can force the tweens to initially render and record everything by jumping to the end of your timeline and then immediately back to the beginning. Once you've created your timeline, you can just do this: tl.progress(1).progress(0); That should get everything ready for you and eliminate that first run stutter that you mentioned. Hopefully that helps. Happy tweening.