Leaderboard

interesting. never thought to rotate the whole thing. thanks!

@dadamssg Welcome to GSAP! A quick outline and regrouping/layering of elements is all it takes to make the rays disappear behind the sun rather than overlaying the sun.

Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.

Wait sorry I found this... Looking through this now: https://codepen.io/GreenSock/full/OPqpRJ/ and the cdn's listed here at the top: https://greensock.com/docs

Hi, As I said, you can also calculate it for each ray. And then staggerTo plus cycle does a great job ... Nice Weekend ... Mikel

Hi and welcome to the GreenSock forums. Sorry to hear about the struggles. I have three things to say/ask about it. Have you checked the documentation regarding the use of GSAP via NPM? Take a look at it: https://greensock.com/docs/NPMUsage Related to the previous point. I don't see any GSAP code in your snippet. What exactly are you trying to do? Have you tried that code in an isolated React project, that doesn't include Gatsby? As far as I know Gatsby shouldn't interfere at all with GSAP in a React project, but just in case. Have you read this? https://greensock.com/react It might help you getting started with using GSAP in a React project. Finally if you can, please set up a reduced sample in either codesandbox or stackblitz showing your issue? Happy Tweening!!

Hi @dadamssg, Welcome to the GreenSock Forum. To achieve this, transformOrigin offers a solution. You can specify an individual value for each ray to make the rays smaller towards the middle. If you can calculate this values. I chose "center" - the easy way, it's the same for everyone. With transformOrigin for the rays, then the entire svg must be rotated. Otherwise there is chaos ... Happy sunshine ... Mikel

Awesome! Thank you very much Carl. Appreciate the swift response. I modified the code slightly because: if the user clicks on, say the first item, the item expands User clicks on that expanded item, and it collapses User clicks on that same (now) collapsed item, it does nothing. I didn't specify it in the beginning, that was my bad. Anywho, I added `.reversed()` check, and it looks like this now: el.addEventListener("click", (event) => { if(el.animation == currentAnimation){ if(!el.animation.reversed()){ el.animation.reverse(); } else { el.animation.play() } } else { ... Now it works fantastic. Thanks for providing the building block! I didn't realize I could use .animation API!

These are all so awesome! Thanks for sharing. I can share a couple. The ones I am most excited about (of course) have yet to hit market so are still secret. Raid Foaming Wasp Spray. Lots of art. File size was challenging. All the foam was created by manipulating one small replicated foam graphic which had different textures on each side. By changing size and rotating/flipping the one piece we were able to get a whole frame of foam for a very small file size hit. http://pfluffernutter.com/portfolio/banners/SCJohnson/raid/banners/300x250/index.html Spinning NFL/PEPSI cup for Buffalo Wild Wings Use of step ease to flip through spinning cup sprite sheet. http://pfluffernutter.com/portfolio/banners/BWW/Pepsi-BWW-NFL/banners/300x600/index.html Draino Animated hair clog No explanation needed LOL http://pfluffernutter.com/portfolio/banners/SCJohnson/draino/banners/300x250/index.html

Welcome to the forums. Thanks for the demos. You were pretty close. It looks like you were just using one timeline and were either reversing it or adding new tweens to the end of it. One way to handle this is to create an animation for each element each time you click on a new rectangle > if the currentAnimation is the same as the animation for the element you just clicked, then ONLY close that animation (reverse it) or else if the currentAnimation is for another element, close the currentAnimation, play the animation of the item you clicked, and re-assign your currentAnimation variable it probably looks better in code: var currentAnimation = new TimelineLite(); rectangles.forEach((el) => { var tl = new TimelineLite({paused:true}); tl.to(el, 0.5, { width: "15rem" }) el.animation = tl; el.addEventListener("click", (event) => { if(el.animation == currentAnimation){ el.animation.reverse(); } else { currentAnimation.reverse(); el.animation.play(); currentAnimation = el.animation; } }) })

Hi I wasn't able to find an example of that, but you can study a few individual pieces and then try to glue them together. For revealing a path, you'll want to use DrawSVGPlugin: https://greensock.com/drawSVG (for Club members) For revealing a stroked path you'll want to do use DrawSVG on a mask that reveals that dashed path: demo For controlling an animation on scroll study ScrollMagic (not a GreenSock product)