coco

Wow, Thank you! I am going to study this. I appreciate you looking at this ❤️ !

@PointC - Good to know. I am actually still learning javascript (for many years LOL!) so I will need to devote time to that one. Thank you for your insights

Thanks @Cassie! I think it is smooth on Chrome too. Perhaps it's the internet connection and other factors beyond my control. I thought there could be some easing function that helps this or some other parmeter/value that I was missing. Yes @PointC - Yes, you are right. I could definitely have created a function where I don't repeat these exact timelines 3 times. I was going to do that later down the line ?

Hi @PointC - Thanks for checking! The large images are SVGs. I want them to take up the screen no matter the size of the browser window. I have always had rotation animation jerkiness, it seems, with Greensock, but maybe am doing it wrong. I notice the jerkiness is intermittent. Like the animation chokes. In terms of using the images as a background, one image is rotating (that is the SVG), and both the SVG and PNG are scaling and fading in and out as the rotation happens. Are you suggesting placing the rotating image into the div as a background and then rotating that div? PS: I see the SVGs are way larger than they should be. I was trying to create a modified pen for this question. In reality, they are each under 60kb.

NOTE: My main issue is how to solve the jerky rotations!

Hi all - I am playing around with a proof of concept. There are 3 slides. Each slide has an image that scales up with a background that rotates. My issues: 1) The rotations are quite jerky, especially in Firefox and Safari. 2) I cannot for the life of me figure out how to loop this animation seemlessly so there is no pause. Can any of you veterans help me with this? Many thanks ahead of time! Ana https://codepen.io/nushi/pen/QWQZJXx

I see. Just to clarify a little further only because I don't want to misunderstand the license as I read it. I am doing some freelance work for an ad agency at the moment. The ad agency has the client and I am working on something for their client's site. If I use the plugins from my Shockingly Green for a banner ad or say a hero animation on the site, does this fall under acceptable use? There is only one site. There is no distribution. The code is uploaded to a private repo. No part of the site is selling anything as it is just informational. Thanks for the detailed reply! Sooooo glad to be back. :-)

Hi everyone ... Quick question: Can I use the extras like the Physics2D plugin for a client. I would be buying the ShockinglyGreen membership for me personally but what if I create animation for a client that uses this plugin? Many thanks!

Hi there .. I took a hiatus from using Greensock and am coming back into it again. Just got into the Creative Coding Club. wooo! My question: I want to create an explosion much like this demo from Greensock https://codepen.io/GreenSock/pen/emjgxw but I want to use SVGs (or even PNGs) instead of objects created by the JS or even CSS. I want to even know if it's even possible before I begin. The effect I want to achieve is an explosion of say, for example, cookies (because they aren't circles with one color) or perhaps a coin, where there one or 2 or 3 cookie/coin SVGs which would explode upward like the demo above. Since it's been a while that I've used the API, and I really haven't found any examples online yet using GSAP, I just want to know if it's possible to use images instead of JS generated elements with simply a defined color and diameter. Any guidance is greatly appreciated! Coco

Carl and PointC Thanks for your help! .. I changed the outer container to not be a fixed width just to see if the forked worked and it did! I like option 3. I appreciate the examples showing the differences. I see the value of setting the original position with gsap and not in the css. But if I had more of these position points, would there be any drawback browser performance-wise of setting all their starting position percentage values in gsap? As an example, I created a pen using 5 absolutely positioned points in a div, each equidistant to cover the 4 corners and the center. http://codepen.io/nushi/pen/QydpwK I am able to absolutely position an object using a class. No big deal. Just CSS. I can see how using GSAP for setting the X and Y translate values is a big time saver and solves my original question about the end position being off after animation. But could adding more set points this way be a taxing to the browser .. . or more taxing than using plain CSS? Say I were to increase the position points to 5, or 10 or 20 points or more? Perhaps setting the values in GSAP first is best choice or only choice if I want the option of animating an object with a from animation to these end points? By the way, in this new pen I know I shouldn't be using a px width to start my animation from the right, but calculating the outerwidth on each container is challenging for me. (hmm... on second thought, maybe I need to use parent() ).. For now, I gave the right side the value: {right: "-100px"}. I think this is a good experiment as another way to place objects on a screen that could be animated rather than using the typical grid .. in some instances. And, if I were to use translate XY for positions around each of the anchor points, I would have even more flexiblity.

First off .. Happy New Year to All I happen to be enjoying mine with a cup of coffee and some greensock practice. Yes, I am loads of geeky fun. So, I cannot quite wrap my head around what I am doing incorrectly with my timeline. See the codepen below as reference. http://codepen.io/nushi/pen/gPgaEN?editors=101 I have created a container div = #test Within this container I have a div absolutely positioned at the center (class="xy-pos-1") I am using the translate attribute because I want this div to be centered regardless of the its dimensions. And, within this div I am placing an image (class="xy-pos-2") that is also absolutely positioned at center relative to its container. Everything works as intended except when I want to animate the image from another position along the x-axis. The finally resting place is not correct. If you comment the timeline animation out, you will see the div is placed exactly as designed. The desired movement is from the right to its ending spot directly in the middle. This works sometimes. I have tried adding various positions to make the "from" position work properly but I have not succeeded. Can anyone shed light on this? I think I am not fully grasping the position parameters here. http://codepen.io/nushi/pen/gPgaEN?editors=101

Thanks, Carl! So, basically, I wasn't far off and just had to remove the curly braces. I suppose it's best to make all the properties into one variable, in case there are more to add. Merry Holidays !

Hi Trying to figure out what I am doing wrong with this pen: http://codepen.io/nushi/pen/MKjQPK I want to pass the properties for the timeline animation through a function's arguments. Passing in the element that is being animated is not the problem. Where I am stumped is with the property. The function has a .from animation. The starting position is what I want to pass as a variable. As you can see in my codepen, and below, I attempted to do this by declaring the CSS position in a var and then converting that CSS position into something that can be used in the timeline and passed as into the function (startPos). What I am doing does not work .... Any better ideas on how to achieve this? Thanks!!

Hi Diaco! Thank you.. I really screwed that one up.. It's so simple!

Hi guys I'm stumped on trying to figure this out: fading in an image and moving it from left (or from anywhere) at the same time. I don't know why it's eluding me and am hoping you can lead me in the correct direction. I created a simple codepen for this. I think I am confusing my syntax here or missing something basic. thanks!