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!

Hi OSU Not sequential like in a gallery modal but when one clicks on any link, the same gsap animation function is applied to the current "i" value and then animates to the next position in the array .. I am not sure this is how to think of applying the gsap transition function to any set of 'like' objects.. hope that makes sense -- thanks!

So I created the effect I wanted with one plain little timeline : http://codepen.io/nushi/pen/ZbZPmw I created a master timeline for this only because I may be adding more functions to the page ... but wanted to post this here as a starter, in case anyone wanted it. To clarify, this was not really the challenge. The reason I was asking so many questions was because I wanted to use a js loop for this same effect .. ... not for doing a project. I just had a bit of trouble describing the transition... I haven't yet wrapped my head around the syntax for js loops ... back to drawing board ..

ok.. thanks .. trying .. I am only trying to do this effect with GSAP as I am still learning . I am doing Petr's tutorial ( I have a couple) which is helping with the nested tl's- it's the syntax for loops etc that always gets me ... but thanks for your help,diaco. really appreciate it!

ok.. I'm back! So, I tried to alter your codepen Diaco, (which is pretty awesome in itself) ... But I wasn't able to achieve what I had in mind .. I reverted back to my codepen forked from yours : http://codepen.io/nushi/pen/vNMKMm This rough demo I created with Edge Animate will show what I have been trying to achieve. (just click 'LINK' to start the transition) http://ideasnstuff.com/rz/index.html It is a simulated page transition that is like how some apps do it... Yes, this may not even be possible with a website, but it's just a simulation. I didn't post this on Codepen because it's crappy code from the Adobe Edge and it's only for demonstration purposes. Not really editable and its not using Greensock anyway.. From what I can see, it's about starting the second animation (movefromright) much sooner but after 1) the first page has scaled down 2) and then moved over a bit. This is when the Page 2 slides in right next to it. 3) page 1 then fades out has it slides to the left 4) Page 2 scales up to 1. Hope you guys can help ... ! I am learning BO COO. here!

ok. wow. i need you as my sensei ... really ... Now I need to understand what you did .... and I will try to make it so only 2 slides show in the body: the one that is being scaled DOWN and the one to be scaled UP. The transition I am trying to see if it's possible to work is basically: - when one clicks on a link (to another slide (or page)) the transition from the current page/slide to the next is the only that should occupy the viewport ...

Ok.. so I'm playing with your pen, Diaco. And I've forked it here : http://codepen.io/nushi/pen/vNMKMm When one 'page' scales down, the next page should come in next to it while it's scaledown so there are 2 scaled down 'page's or slides in the viewport at the same time... In this case, with the timeline you have with the loop, how does one start that subsequent timeline a little earlier, so we see it earlier. And, is it even possible to do this?

@Diaco What does the "L" stand for? --- ie: .to(slides,1,{xPercent:-100,rotationY:80},'L'+i) TweenLite.set('body',{perspective:1000}); var slides=document.querySelectorAll('.slide') , tl=new TimelineLite(); for(var i=slides.length;i--{ tl.addPause() if(i>0){ tl.to(slides[i],.7,{scale:.8,ease:Back.easeOut}) .to(slides[i],1,{xPercent:-100,rotationY:80},'L'+i) .from(slides[i-1],1,{xPercent:100,rotationY:-80},'L'+i) .from(slides[i-1],.7,{scale:.8,ease:Back.easeIn}) } }; document.addEventListener("mousewheel",mouseW); document.addEventListener("DOMMouseScroll",mouseW); function mouseW(e){ var SD = e.wheelDelta||-e.detail; if(SD<0){tl.play()}else{tl.reverse()}; };

Great guys! Petr, I will definitely go over that tutorial today. And thanks again, Diaco. Now I just have to practice this some more. I figured it was that I had to add timeline, I just got stumped editing the code which I had forked. It's all syntax n stuff. And javascript is still my weakness. Will see what I can do. Am trying to use Greensock for prototyping transitions for a clients rather than using something like Webflow or Edge Animate.

Hi All So I am stumped and all that I have tried has just been a bit of a mess. This is my pen, currnently working on this :: http://codepen.io/nushi/pen/QjoerL I started this with a fork off Joost Kiens wonderful pen from here: http://codepen.io/JoostKiens/pen/LExggp Currently the transition does this; Onclick of nav item, 'page' scales down and opacity lowers Next page slides in from the right, opacity full. What I want to do is 2 things: 1. Make these 2 animations happen simulaneously AND 2. Have page 2 (or the subsequent page) slide in from the right but at the same scale as the originating page (Let's say Page 1) and as both page 1 and page 2 move leftwards, page 2 comes into full scale. Hope that makes sense! Both pages are animating. One to scale .8 and the other one from scale .8. They are both visible but the first page will move out of the screen and the second page comes into view. Since these animations are broken down into functions, one for each movement (Scale Down & Move From Right), I do not know how to accomplish this.. It seems that the Move From Right needs to have a few steps: 1. Start at scale .8 2. Show up initially sliding in from right but adjacent to the first page 3. Then second page scale up to 1. I've attached a very rough sketch of the animation ... I hope some javascript geniuses in here can help me out

Diaco and Jonathan .. I got it! I knew I'd studied that but it completely disintegrated in my memory.