PointC

Hi ladyRalph That looks like a graphics card issue to me. Could also be a browser bug, but I can't see GSAP being the culprit. GSAP doesn't render anything - it just animates values. I'd have the client check on a few different systems and see if you can isolate it to a particular card and/or browser. Happy tweening.

Ha! I had this sudden Tron-style vision of a death-match between CSS and GSAP.

Hi HappyCoderInLondon Welcome to the GreenSock forums. If I understand your question correctly, it sounds like an image slider with a .png or SVG of an iMac screen in front of it as a mask? Would this be full screen? Is it a fixed size or something that would scale? There would be a number of ways to make that happen. If you search sliders here on the forum you'll find a lot of topics. CodePen also has loads of examples to help you get started. http://codepen.io/search/pens?q=image+slider&limit=all&type=type-pens The best way to get help is to put together a CodePen demo for us. It doesn't need to be the finished product. Just a few simple divs/images and what your desired outcome would be. Editing your live code allows us to give you the best assistance. Check out Carl's blog post about creating a CodePen. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that info gets you started. Happy tweening and welcome aboard.

I just looked at your pen again and I think you'll want to use jQuery each() if you're going to have multiple buttons and animations like that. Here's a pen I made in answer to another forum question, but it works the same way as what I think you're trying to accomplish. http://codepen.io/PointC/pen/ALbpPb Hopefully that helps a bit.

Hi mikel I'm not quite sure of the desired outcome here. If one of the divs is animating and you hover over the other button what should happen to the piece that is currently animating? Should it continue? or reverse? or stop? When asking about hovering too fast, I think you're probably looking for the isActive() method. You can use that to only play the animation if it's not already playing. More info here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/ If you can give a few more details about the desired behavior, I'm sure we can get you on the right path. Thanks and happy tweening.

Very nice Carl. That's why you wear the cape.

Hi jsweriduk Welcome to the GreenSock forums. You can have different things happen to your button for mouseenter, mouseleave, mousedown and mouseup. I think you'd usually want to stay with a reverse of the timeline for your hover in/out events. Here's an example I made as an answer to another question, but it shows the basics for you. http://codepen.io/PointC/pen/WrjzOa/ Regarding lines turning to an x, you'll find loads of examples on CodePen. Here's an example of that I used for another forum question: http://codepen.io/PointC/pen/XKbEBQ If I understand the last part of your question, I'd recommend staying clear of having an x trigger a new animation unless it's very clear to the user. I think most users that saw a set of lines turn into an x would assume that clicking the x would close whatever they just opened. It would probably be better to have a new button appear when that new panel or image has opened. Just my 2 cents worth on that from a user experience point of view. Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi hacu95 Welcome to the GreenSock forums. You've created an animation fight between GSAP and CSS. Please remove this from line 1of your CSS: *{ transition: 2s all ease-in-out; } It's not usually a good idea to mix CSS and GSAP animations. Once you remove that, it should work correctly for you. Happy tweening.

Ha! I see the next installment of Dipscom's Photoshop Adventures has been published. I wonder if Blake will respond with another new CodePen similar to 'Kim Jong Dipscom'? Nice work Sir Pedro.

Hi neuhaus3000 Do you have a specific GSAP related problem building that or are you just looking for general advice on how to get started? If you're looking for preloader examples, CodePen is loaded with them: http://codepen.io/search/pens?q=preloaders&limit=all&type=type-pens We do try to keep the forum focused on GSAP assistance so if there is something specific with which you need help, please let us know. If you can get something started and supply us with a CodePen, I'm certain we can help you through any difficulties. For more info about creating a CodePen, please visit Carl's blog post. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening.

Hi rsr Welcome to the GreenSock forums. I'd echo Dipscom's request for a demo so we can more easily troubleshoot for you. Something to keep in mind - fromTo() tweens by default have immediateRender set to true. From the docs: NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins.More reading about fromTo() tweens; http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/fromTo/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi dwillis Looks like you're using older versions of TweenMax and ScrollTo. I switched them to 1.19 in your pen and it worked fine. Just make this adjustment and you should be good to go. <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script> Happy tweening.

Hi Nickzilla I'm not sure morphSVG is the best choice for creating pie chart wedges. Using drawSVG (stroke-dasharray) makes it pretty easy to calculate sizes. 360 degrees in a circle so 3.6 degrees per percentage point of completion. That's why you'll see most people using the stroke technique. I have a couple pens in my collection that use this method. Pie Chart Bakery http://codepen.io/PointC/pen/yOELLJ/ Movie Countdown http://codepen.io/PointC/pen/jqaKYL/ Others may jump in here with more advice or examples, but I'd say using the stroke of the path would be better than trying to morph into new pie wedges. Hopefully that helps a bit. Happy tweening.

Hi j1pster Welcome to the GreenSock forums. I'd recommend using SVG masks for this. Instead of scaling the circular mask you can use the attribute plugin and animate the radius. I made a quick demo for you. http://codepen.io/PointC/pen/ENRprd/ Hopefully that helps a bit. Happy tweening and welcome aboard.

If you want to go from point a to point b to PointC (ha!), you could easily do that with the Bezier Plugin. It's automatically loaded with TweenMax. Check out the docs for that here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/ Rather than worry about the position parameter for those tweens in the second part of the animation, I'd recommend nesting those timelines into a parent as Carl mentioned above: http://codepen.io/GreenSock/pen/ENLXrJ?editors=0011 Here's another super simple example of nesting http://codepen.io/PointC/pen/obyJEM Hopefully that helps a little bit. Happy tweening.

I was a little confused by the question as well. Are you asking about morphing back to the original shape? I don't know if this will be of any help, but here's an older pen of mine that morphs through a series of shapes and then back to the original. http://codepen.io/PointC/pen/yejGvb/ Happy tweening.

Hi NeedHate If I understand your question correctly, I think you need to look at the position parameter. It will allow you to start tweens at an absolute time or label as well as relative to the end of a timeline or label. Please see this blog post for a deeper understanding http://greensock.com/position-parameter If you have lengthy timelines that need to start at the same time, you can also build them separately and add them to a parent timeline. Here's a pen I made as an answer to another forum question but it shows the basic mechanics of nesting timelines. http://codepen.io/PointC/pen/obyJEM Hopefully that helps. Happy tweening.

Hi phantomboogie I think I see where the confusion is coming from. You have a zero duration tween to set some properties and are setting that to start at a time of 0, but the tween that follows it will still just play in sequence rather than also starting at a time of 0. I think it might be easier to use set() for those initial positions like this: var tweenTl = new TimelineMax(); tweenTl //set starting positions .set('#head', {y: "0", transformOrigin: '50% 100%'}) .set('#eye', {x: "30px", y: "50px", scale: 0, transformOrigin: '50% 70%'}) //first part .to('#head', 0.7, {y: "-72", ease: Back.easeOut}) //second part .to('#eye', 0.7, {x: "20px", y: "35px", scale: 1, ease: Back.easeOut},0); Here's a fork of you pen with that solution: http://codepen.io/PointC/pen/qqYjKz?editors=0010 Hopefully that helps a bit. Happy tweening.

Is this the same question that Blake has been trying to help you with in this thread? http://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/ I'm confused about your desired outcome. You asked about dragging an object that stays fixed and a new target drags? onPress and onDrag are two different events. Are you asking about using the onPress as some sort of toggle? If you could provide a simplified CodePen and some more details, I think we can help you. It doesn't have to be anything with images either. Just a couple plain divs and what you want to happen would be great. Thanks.

Yes - you could force the first animation to finish before allowing the user to scroll. Simply set the body overflow to hidden in your CSS and then use an onComplete callback to set the overflow back to visible when the intro timeline has finished. You could do it like this: var intro = new TimelineMax({onComplete: function() { TweenMax.set("body", {overflow:"visible"}) } }); Here's a fork of your pen with that solution applied to it: http://codepen.io/PointC/pen/wzLmKm I slowed down your scene1 timeline so you can more easily see what's happening. Happy tweening.

Hi LazyRectangle Welcome to the GreenSock forums. It's always good practice to have a fallback for those scenarios. You can set up a check if the user has JavaScript disabled and if they do you can set the height of the nav bar via your CSS. Modernizr makes that pretty easy for you. https://modernizr.com/ You can also use a <noscript> tag to display a message for those users as well. Hopefully that helps a bit. Happy tweening and thanks for being a Club GreenSock member.

Hi d0minium Welcome to the GreenSock forums. Your intro animation doesn't finish because your intro and scene1 timelines are both targeting the .eye class. The intro animation starts playing immediately, but as soon as you scroll to the scene1 trigger, you start the scene1 timeline which then takes control of the .eye element and starts animating it. You're basically starting a fight for control with two timelines trying to animate the same element. Hopefully that makes sense. Happy tweening.

Hi Jeff Pang Welcome to the GreenSock forums. Your pause() isn't working because you're not playing the tl timeline. When you use the tweenFromTo() method, you're creating a new tween that scrubs the timeline. You have a couple options to get the correct behavior. Since you're playing the timeline from start to finish anyway, the easiest would be to change line 13 in your pen to simply play() the tl timeline: //switch this: tl.tweenFromTo("start","end"); //to this: tl.play(); If you want to use the tweenFromTo() method so you can play from label to label, you'll need to create a reference to the new tween so you can control it. In your start button function you can create a reference to the new tween like this: yourReference = tl.tweenFromTo("start","end"); Then change your pause button function to this: yourReference.pause(); Here's a fork of your pen with the second option: http://codepen.io/PointC/pen/738a5b1a5ab18f00238350de686ff925/ More reading about the tweenFromTo() method. http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenFromTo/ Hopefully that helps and makes sense. Happy tweening.

Happy to help. That's how we roll in the GreenSock neighborhood.

Hi Caroline_Portugal If I understand your question correctly, it looks like you don't need to recreate the animation on a resize event. It seems you want it to play or not depending on the screen size. If that's the case, you don't need to kill() the animation, but rather play() or pause() it depending on the screen size. You can put all your screen size logic into a function and call it when the page loads and call it again when the screen is resized. Here's a fork of your pen with that solution. http://codepen.io/PointC/pen/RGmdVx/ Hopefully that helps a bit. Happy tweening.