en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en gu en en en en en en en en en hbs_lat en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en es en en en en en de en nl en fr en en en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Five years of GSAP = motiontricks.com
Hey fellow GreenSockers A little over five years ago, I took a chance and posted a question on the GreenSock forum. Nobody called me dumb and that was a HUGE relief! So much so that I wrote an entire GS post about it four years ago. It was a turning point for me and my JavaScript journey. Today, I’m taking another big leap in my life and launching a web animation tutorial site. My reasons for doing so are both personal and professional. This thread is a sequel to my One Year post listed above. Call it My Five Year Journey. Personal reasons My life has been full of twists, turns and milestone events over the past few years. I turned the big 50 and ask myself every day how that’s even possible. The memories of getting my first computer (TRS-80) and learning BASIC in the early 80s are so vivid that they feel like it was only a few years ago. Wasn’t it just yesterday I was programming the PET, VIC-20 and Commodore 64 in high school? Time does fly and I’m not getting any younger. I also celebrated my 30th wedding anniversary. That event itself isn’t a reason to start a new website, but the longer I’m married, the more I realize how lucky I am to have a partner and cheerleader with me when I try new things. She has been a tremendous support in this new endeavor. I wonder how I ever talked her into marrying me all those years ago and how she has put up with me for 30+ years. The other recent personal event that has shaped my decision is the one that is affecting us all right now. Seeing the effect of COVID-19 on the world and how it has robbed too many people of their lives and livelihoods has reminded me that time is precious, and you never know what’s around the corner. As they say, seize the day. Professional reasons After taking the leap and posting that first question on the forum, I was hooked on the GreenSock community. I’ve tried to help as many people as I could in my free time. I love seeing someone have that ‘ah-ha’ moment. This new site is an extension of that desire to help and teach. This will be a difficult challenge. It would be far easier to not do this. As a lifelong introvert, I’m far more comfortable in my dark office typing away on the keyboard so this definitely pushes me out of my comfort zone. It will also be a time management challenge to keep posting new content while taking care of clients and still helping on the forum. I’ll do my best. My final professional reason is that this just seems like the universe is pushing me in this direction. I loved computers and programming in my youth, but my career turned to my other loves of video production and photography. Throughout the last decade there have been many forks in the road, and it seems like every decision has led me here. My life has now come full circle. Fear and self-doubt Despite all the personal and professional reasons listed above, there has still been the nagging self-doubt. Will it be any good? Will anyone read it? Hasn’t this already been written? Maybe others don’t have that little voice in the back of their head, but mine starts yelling at me loudly when I try something big. It’s one thing to post an answer in the forum, but quite another to really put yourself out there with a whole new site. After some sleepless nights, I finally found calm from one realization. If I can help even one person with a problem, teach them something new or spark an idea, it will all be worth it. The rest of the fears don’t matter. Life is just too short to be scared or worried. The website’s focus If you know me from the GS forum, you know I love SVGs and making them move with GSAP. The website will, of course, feature a lot of SVGs and GreenSock will power everything. However, my primary focus will be real world projects. I find that I learn best when I’m building an actual project, so I’ll try to keep that as the focus. I’ll have lots of little tips and quick things too, but projects will be the main thing. Frequent visitors to the forum also know I don’t take it all too seriously and joke around a lot. You’ll be happy to know that several of the tutorials feature terrible jokes and puns at no extra charge. Thanks to the GS gang I’ve said it many times before and I’ll say it again. Thank you to Jack( @GreenSock) for creating the tools, but more importantly, thanks for fostering a terrific online community. Had I not discovered GSAP and started hanging around here, I would not know much about JavaScript and the new site would not exist. Special shout-out to @Carl too. He’s already in the trenches with training and tutorials and has encouraged me the whole way as I was getting this thing launched. All my fellow mods — thanks for the help and comradery over the years. You are all awesome! motiontricks.com Finally, without further ado, I introduce you to motiontricks.com My best to all of you. Thanks for reading. Now, let’s get those pixels movin’! 🚀 -Craig (PointC)
Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.
How to manipulate flex values?
You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate. To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump. This technique will work for every flexbox property. It will actually work for any type of layout that the browser handles, like the new CSS grid. For more information, check out these threads.
Conventional wisdom says that kilobytes have a direct impact on load times and consequently user experience. Too many developers, however, myopically focus on a simplistic (and rather dated) "aggregate total file size" mentality and completely miss the broader goal of improving user experience. This article aims to challenge the old paradigm and explain why "spending" kilobytes on a library like GSAP can be a very smart move. Kilobyte cost factors When you're assessing kilobyte cost in a modern, nuanced way consider these factors: Performance yield Would you spend an extra 200ms of load time to get super-smooth animations at runtime? Are users more sensitive to janky animations the whole time they're interacting with your site...or a fraction of a second on initial load? Of course there are reasonable limits either way (waiting an extra 30 seconds for a huge file to load would be intolerable even if it made things run buttery smooth), but in most cases we're only talking about fractions of a second difference. GSAP contains "extra" code that automatically GPU-accelerates transforms, applies lag smoothing, avoids layout thrashing, caches important values for super-fast lookups, etc. - would removing those features for the sake of a few milliseconds on initial load (and zero savings once it's cached) be a step forward or backward? Caching When does a 23kb file act like a 0kb file? When it's cached! This is particularly relevant for engaging, animated sites because there are common tasks and code that can be encapsulated and shared. GSAP is a perfect example of a shared resource. An end user only loads it once and then it's completely "free" thereafter...for all pages pointing at that file...on all sites*! *Some browsers may implement domain-specific caching. CDN files loaded from a CDN (Content Delivery Network) are typically "faster" because they're geographically distributed and automatically loaded from the closest server. Plus CDNs have inherent redundancies leading to better reliability. Custom code reduction (kb savings) Loading a library like GSAP may allow you to only write 1kb of custom animation code instead of 5kb of CSS animation code, for example. Plus it has quite a few utility methods that you can tap into for added savings. This can significantly reduce the amount of custom code that must be loaded as your visitors go page-to-page Non-kilobyte costs If you avoid a tried-and-true library like GSAP, it may feel like you're reducing your costs but don't forget: Development time You could use a minimalistic library or write your own, but how much more time will that take to implement? How much custom code will it require? How many workarounds will be required to get similar functionality? How many headaches will you run into with cross-browser quirks and inconsistencies that GSAP already solved? GSAP's API has been crafted over a decade to facilitate easy experimentation with minimal code. And when it comes to animation, experimentation is key. Most developers are working against deadlines and it's priceless to have a robust, vetted toolset to rely on. Swagger & confidence Perhaps your project only has basic animation needs so you choose a basic animation library or write your own custom code for all the animations...but what happens when the client requests something more advanced? Uh oh. Will you port everything to GSAP then? What if you've got hundreds of animations that now need to be dynamically time-scaled or linked to scroll position with smooth scrubbing? How about advanced morphing, motion paths, and responsive animations? If you just use GSAP from the start, you have almost zero risk of running into an "oh no!" moment like that. You can code with confidence that you'll be able to animate pretty much anything with minimal code. What is that kind of developer swagger worth? Documentation, support & training What if you run into trouble? Is excellent documentation available? Is there a community eager to help? Are there training resources for new hires down the road? What's the real long-term impact of your choice? Maintenance The web is littered with abandoned open source projects. What's the track record of the one you're considering? How long has it been actively developed? Or if you're writing all your own animation code from scratch, is it truly maintainable? What's the long-term cost? Are you documenting how everything works? What happens when browsers introduce bugs or new features that impact animations? Other factors to consider Bandwidth is only increasing The impact of a 24kb library is decreasing all the time. It's less than a single image these days. On average, in fact, images account for over 864kb on every web page! And again, GSAP is a one-time load in most cases. It's often cached in which case it costs nothing. GSAP doesn't count against file size budgets on every major ad network They have virtually all recognized GSAP as an industry standard and exempted it from file size calculations. That directly benefits you if your animations are GSAP-based. Google, Sizmek, Advertising.com, Flashtalking, AdWords, Flite, Cofactor, etc. - they're all on board with GSAP. Conclusion The old mindset focused on the aggregate total file size for each page making it's easy to miscalculate the cost of using a library like GSAP (or any other shared resource). Doing so also pushes developers toward minimalistic less-capable solutions that may end up being far more expensive long-term. We'd encourage a more wholistic, nuanced approach that looks at the overall costs and benefits. Remember the end goals - outstanding user experience, minimal development costs, and long-term viability.
Better Adobe Illustrator SVG exports make GSAP animating easier
Oh my turn! my turn!! PS: Sorry couldn't resist
Please Read: Guidelines for Posting
Tweening via Vue.js reactive data properties -- gsap becomes limited in power due to not full access to DOM?
Welcome! In this article we’re going to cover GSAP's core fundamentals and animate some HTML elements. If that’s not your end goal, don’t worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. If you just want to jump in, here are some handy links. Full documentation GSAP cheatsheet CodePen starter template Installation guide. Still with us? Wonderful, let's get started! What is "GSAP"? The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including more than 50% of award‑winning ones! You can use GSAP to animate pretty much anything JavaScript can touch, in any framework. Whether you want to animate UI, SVG, Three.js or React components - GSAP has you covered. The core library contains everything you need to create blazing fast, cross-browser friendly animations. This is what we'll be stepping through in this article. In addition to the core, there are a variety of plugins. You don’t need to learn them in order to get started, but they can help with specific animation challenges like scroll based animation, draggable interactions, morphing, etc. See an overview of the available plugins. Creating an animation. Let's start by animating an HTML element with a class of "box". gsap.to(".box", { x: 200 }) A single animation like this is called a 'tween'. This tween is saying "hey GSAP, animate the element with a class of '.box' to an x of 200px (like transform: translateX(200px))".
Getting Started with GSAP + React.
Struggling with .from() tweens in React 18? This is due to React's new 'Strict mode' - this forum thread will help you get back on track. React is a hugely popular library choice, and as evidenced by many of the sites in our showcase - React and GSAP can be a powerful combination. However, utilizing GSAP in React requires a different way of thinking than a vanilla JS project. We've written this guide to help you get started using GSAP within a React project. This is not a tutorial, so feel free to dip in and out as you learn. Think of it as a collection of recommended techniques and best practices to use in your projects. Why GSAP? Animating with GSAP gives you unprecedented levels of control and flexibility. You can reach for GSAP to animate everything — from simple DOM transitions to SVG, three.js, canvas or WebGL — your imagination is the limit. More importantly, you can rely on us. We obsess about performance, optimizations and browser compatibility so that you can focus on the fun stuff. We've actively maintained and refined our tools for over a decade and there are no plans to stop. Lastly, if you ever get stuck, our friendly forum community is there to help. Going forward we will assume a basic understanding of GSAP and React. If you're just getting going with React, this tutorial from the React team is a great place to start. Need a GSAP refresher? Take a break and read about tweens and timelines. We’ll be here when you get back. Feeling confident? Skip straight to part 2 - GSAP + React, advanced animation techniques. Quick Links Getting set up Targeting a DOM element for animation Creating our first animation Targeting descendant elements Creating a timeline Controlling when React runs our animation with useEffect Reacting to changes in state Animating on interaction Avoiding flash of unstyled content (FOUC) Cleaning up Online Playgrounds Get started quickly by forking one of these starter templates: CodePen CodeSandbox CodeSandbox + Bonus Plugins Create a new React App If you prefer to work locally, Create React App provides a comfortable setup for experimenting with React and GSAP. To create a project, run: npx create-react-app gsap-app cd gsap-app npm start Once the project is set up we can install GSAP through npm, npm i gsap npm start then import it into our app. import React from "react"; import { gsap } from "gsap"; export default function App() { return ( <div className="app"> <div className="box">Hello</div> </div> ); } More detailed information about getting started with React Additional GSAP installation documentation Targeting elements In order to animate using GSAP we need access to the element in the DOM. Refs provide a way for us to interact with and store references to DOM nodes in a React component. const boxRef = useRef(); return <div className="box" ref={boxRef}>Hello</div>; Read more about refs in the React docs Creating our first animation GSAP updates inline style properties, so it’s important to make sure the DOM has been rendered before trying to animate anything. If we ask GSAP to animate an element that hasn’t been rendered, we’ll get this warning in the console. GSAP target not found. In order to avoid targeting a null element, we can use the useEffect hook. This hook tells React that our component needs to do something after rendering. function App() { // store a reference to the box div const boxRef = useRef(); // wait until DOM has been rendered useEffect(() => { gsap.to(boxRef.current, { rotation: "+=360" }); }); // DOM to render return <div className="box" ref={boxRef}>Hello</div>; } In this example, React will first render the box element to the DOM, then GSAP will rotate the box 360deg. See the Pen React & GSAP Starter Template by GreenSock (@GreenSock) on CodePen. Targeting descendant elements gsap.utils.selector() Creating a ref for each and every element we want to animate can add a lot of noise to our code. We can avoid this by making use of GSAP’s selector utility to easily select descendant elements. const el = useRef(); const q = gsap.utils.selector(el); useEffect(() => { // Target ALL descendants with the class of .box gsap.to(q(".box"), { x: 100 }); }, []); See the Pen gsap.utils.selector() by GreenSock (@GreenSock) on CodePen. Forwarding refs gsap.utils.selector() will target all descendants in the component tree. Within a component based system, you may need more granular control over the elements you're targeting. You can use ref forwarding to get access to specific nested elements. See the Pen Forwarding refs by GreenSock (@GreenSock) on CodePen. Creating and controlling timelines Up until now we've just used refs to store references to DOM elements, but they're not just for elements. Refs exists outside of the render loop - so they can be used to store any value that you would like to persist for the life of a component. If you're coming from class based components, this should be familiar to you as it’s essentially the same as using ‘this’. In order to avoid creating a new timeline on every render, it's important to create the timeline inside an effect and store it in a ref. function App() { const el = useRef(); const q = gsap.utils.selector(el); const tl = useRef(); useEffect(() => { tl.current = gsap.timeline() .to(q(".box"), { rotate: 360 }) .to(q(".circle"), { x: 100 }); }, []); return ( <div className="app" ref={el}> <Box>Box</Box> <Circle>Circle</Circle> </div> ); } This will also allow us to access the timeline in a different effect and toggle the timeline direction. See the Pen React Tutorial 2f by GreenSock (@GreenSock) on CodePen. Controlling when React runs our animation. By default useEffect runs both after the first render and after every update. So every time our component’s state changes, it will cause a re-render, which will run our effect again. We can control when useEffect should run by passing in an array of dependencies. To only run once after the first render, we pass in an empty array. // only runs after first render useEffect(() => { gsap.to(q(".box-1"), { rotation: "+=360" }); }, []); // runs after first render and every time `someProp` changes useEffect(() => { gsap.to(q(".box-2"), { rotation: "+=360" }); }, [someProp]); // runs after every render useEffect(() => { gsap.to(q(".box-3"), { rotation: "+=360" }); }); See the Pen React Tutorial 1b by GreenSock (@GreenSock) on CodePen. Reacting to changes in state Now that we know how to control when an effect fires, we can use this pattern to react to changes in our component. This is especially useful when passing down props. function Box({ children, endX}) { const boxRef = useRef(); // run when `endX` changes useEffect(() => { gsap.to(boxRef.current, { x: endX }); }, [endX]); return ( <div className="box" ref={boxRef}>{children}</div> ); } See the Pen React Tutorial 1c by GreenSock (@GreenSock) on CodePen. Animating on interaction Interaction is one of the most exciting things about animating on the web! In order to hook into user interactions like hover, we can use callbacks. const onEnter = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#e77614" }); }; const onLeave = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#28a92b" }); }; return ( <div className="box" onMouseEnter={onEnter} onMouseLeave={onLeave}> Hover Me </div> ); See the Pen React Tutorial 1d by GreenSock (@GreenSock) on CodePen. Avoiding flash of unstyled content (FOUC) As useEffect fires after the DOM has been painted, when fading in elements you may notice an undesired flash of unstyled content. In order to avoid the flash, we can replace useEffect with useLayoutEffect. useLayoutEffect functions exactly the same as useEffect, but runs before the DOM has been painted. See the Pen Avoiding FOUC with useLayoutEffect() by GreenSock (@GreenSock) on CodePen. useLayoutEffect is especially useful when you need to make DOM measurements, so we highly recommend it when using our ScrollTrigger and FLIP plugins. More information about useEffect vs useLayoutEffect. Cleaning Up It’s a good idea to return a cleanup function in your effects to kill off any running animations and anything else that could cause a memory leak, like an event listener. This is particularly important if an animation runs for a really long time, makes use of ScrollTrigger, or changes the state in a component. useEffect(() => { const animation1 = gsap.to(".box1", { rotation: "+=360" }); const animation2 = gsap.to(".box2", { scrollTrigger: { ... } }); const onMove = () => { ... }; window.addEventListener("pointermove", onMove); // cleanup function will be called when component is removed return () => { animation1.kill(); animation2.scrollTrigger.kill(); window.removeEventListener("pointermove", onMove); }; }, []); We hope this article was helpful - If you have any feedback please leave us a comment below so we can smooth out the learning curve for future animators! Feeling confident and want to learn more? Check out our follow up article - GSAP + React, advanced animation techniques.
I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.
I know this thread is now over a month old, but I wanted to share a fork of Zach's pen. I made a 6-sided die from the cube. To simplify/clarify, the 3d rotations are moved out of the CSS. Hopefully this demo is useful to someone... https://codepen.io/creativeocean/pen/qBRbNwa
Fullscreen sliders horizontal and vertical
Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving
CodePen Challenge Competition 2020
Are you familiar with CodePen Challenges? In June 2020, GreenSock got to host it! We decided that it'd be fun to have a competition and give away 3 "Shockingly Green" Club GreenSock memberships each week! What is a CodePen Challenge? CodePen is a site where you can create and share small frontend web projects that you've made. You can also start with another person's creation and then modify it to become your own creation (this is called forking). Every month, CodePen hosts 4 weekly challenges with different themes. They host these challenges to help you improve your frontend skills, express yourself, and have some fun! How did this competition work? Every Monday this month, check the CodePen Challenges page for the new theme (you can sign up there for notifications too). Then make something based on that theme! It could be anything. Each week we will provide some different ideas to get you started, but you can create anything so long as it fits the challenge prompt that week. To submit entries to the competition, people tagged @GreenSock on Twitter along with a link to your pen. At the end of the each week, our panel of judges went through and pick their favorite pens that were created that week. The creators of the top 3 pens each week received a one-year "Shockingly Green" Club GreenSock membership on us! Who were the judges? Meet our lovely judges for the GSAP CodePen Challenge Competition (you should follow them!): Aaron Iker Adam Kuhn Annie Liew Cassie Evans Chris Gannon Craig Roblewsky Jhey Tompkins Lisi Linhart Louis Hoebregts Lynn Fisher Olivia Ng Pete Barr Shaun Gorneau Steve Gardner Tom Miller Una Kravets What's this week's challenge? Unfortunately the CodePen Challenge competition is over. But you're free to follow the same challenge prompts to inspire you to create something! We'd still love to see it. You can view all of the challenge prompts on CodePen. The winners Week 1: Sequencing Congratulations to our week one (sequencing) winners: Benoît Wimart, Sicontis, and Cristobal Garcia! Be sure to check out the rest of the submissions. modulofont Sequencing (Mom’s Diner) .cCmsCategoryFeaturedEntry .cBlackContent a { text-decoration: none; } html[dir="ltr"] .ipsGrid_span4:nth-child( 3n+1 ) { margin-left: 2.127659574468085%; } Taika cruising through La Gran Sabana Week 2: Bubbling Congratulations to our week two (bubbling) winners: Louise Flanagan, Oscar Salazar, and Wendy Kong! We had to bring in an extra judge to break ties because the voting was so close so be sure to view all of the submissions as well. Bubbly Bath Bubbles Bunny Breathing Exercise Week 3: Sliding Congratulations to our week three (sliding) winners: Oscar Salazar, Wendy Kong (both are winners two weeks in a row! Very impressive.), and ycw! You can view all of the submissions here. Slash GSAP Penguin Blue Room Week 4: Scrolling Congratulations to our week four (scrolling) winners: supamike, Ismael Martínez, and Shunya! View all of the submissions here. 3D Banners Personal Page Underwater Scrolling Animation Thanks so much to all who participated. We couldn't have ran this competition without you!
Google CDN gets GSAP (for DoubleClick & AdWords)
[updated September 2, 2020] Good news: Google pushed GSAP to their CDN (for use with DoubleClick and AdWords ads). URLs can be found at: https://support.google.com/richmedia/answer/6307288#gs If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!
GSAP + React, Advanced Animation Techniques.
Are you working with React and looking to really advance your GSAP animation skills? You're in the right place. This guide contains advanced techniques and some handy tips from expert animators in our community. This is not a tutorial, so feel free to dip in and out as you learn. Think of it as a collection of recommended techniques and best practices to use in your projects. Why GSAP? Animating with GSAP gives you unprecedented levels of control and flexibility. You can reach for GSAP to animate everything — from simple DOM transitions to SVG, three.js, canvas or WebGL — your imagination is the limit. More importantly, you can rely on us. We obsess about performance, optimizations and browser compatibility so that you can focus on the fun stuff. We've actively maintained and refined our tools for over a decade and there are no plans to stop. Lastly, if you ever get stuck, our friendly forum community is there to help. Going forward we will assume a comfortable understanding of both GSAP and React. If you're starting out we highly recommend reading our foundational article first - First Steps & Handy Techniques.. Quick Links Component Communication Passing down a timeline prop Passing down callback to build a timeline React Context Imperative Communication Creating Reusable Animations registerEffect() Exit Animations Custom Hooks useSelector useArrayRef useStateRef useIsomorphicLayoutEffect Online Playgrounds Get started quickly by forking one of these starter templates: CodePen CodeSandbox CodeSandbox + Bonus Plugins Component Communication In the last article, we covered creating our first animation, and how to create and control timelines within a React component. But there are times where you may need to share a timeline across multiple components or construct animations from elements that exist in different components. In order to achieve this, we need a way to communicate between our components. There are 2 basic approaches to this. a parent component can send down props, e.g. a timeline a parent component can pass down a callback for the child to call, which could add animations to a timeline. Passing down a timeline prop Note that we are using useState instead of useRef with the timeline. This is to ensure the timeline will be available when the child renders for the first time. function Box({ children, timeline, index }) { const el = useRef(); // add 'left 100px' animation to timeline useEffect(() => { timeline.to(el.current, { x: -100 }, index * 0.1); }, [timeline]); return <div className="box" ref={el}>{children}</div>; } function Circle({ children, timeline, index, rotation }) { const el = useRef(); // add 'right 100px, rotate 360deg' animation to timeline useEffect(() => { timeline.to(el.current, { rotate: rotation, x: 100 }, index * 0.1); }, [timeline, rotation]); return <div className="circle" ref={el}>{children}</div>; } function App() { const [tl, setTl] = useState(() => gsap.timeline()); return ( <div className="app"> <Box timeline={tl} index={0}>Box</Box> <Circle timeline={tl} rotation={360} index={1}>Circle</Circle> </div> ); } See the Pen React Tutorial 3a by GreenSock (@GreenSock) on CodePen. Passing down a callback to build a timeline function Box({ children, addAnimation, index }) { const el = useRef(); // return a 'left 100px' tween useEffect(() => { const animation = gsap.to(el.current, { x: -100 }); addAnimation(animation, index); return () => animation.progress(0).kill(); }, [addAnimation, index]); return <div className="box" ref={el}>{children}</div>; } function Circle({ children, addAnimation, index, rotation }) { const el = useRef(); // return a 'right 100px, rotate 360deg' tween useEffect(() => { const animation = gsap.to(el.current, { rotate: rotation, x: 100 }); addAnimation(animation, index); return () => animation.progress(0).kill(); }, [addAnimation, index, rotation]); return <div className="circle" ref={el}>{children}</div>; } function App() { // define a timeline const [tl, setTl] = useState(() => gsap.timeline()); // pass a callback to child elements, this will add animations to the timeline const addAnimation = useCallback((animation, index) => { tl.add(animation, index * 0.1); }, [tl]); return ( <div className="app"> <Box addAnimation={addAnimation} index={0}>Box</Box> <Circle addAnimation={addAnimation} index={1} rotation="360">Circle</Circle> </div> ); } See the Pen Passing down a callback to build a timeline. by GreenSock (@GreenSock) on CodePen. React Context Passing down props or callbacks might not be ideal for every situation. The component you're trying to communicate with may be deeply nested inside other components, or in a completely different tree. For situations like this, you can use React's Context. Whatever value your Context Provider provides will be available to any child component that uses the useContext hook. const SelectedContext = createContext(); function Box({ children, id }) { const el = useRef(); const selected = useContext(SelectedContext); useEffect(() => { gsap.to(el.current, { // animate x by 200 if the box ID matches the selected context value x: selected === id ? 200 : 0 }); }, [selected, id]); return <div className="box" ref={el}>{children}</div>; } function App() { // Any component can read the value passed to the provider, no matter how deeply nested. // In this example, we're passing "2" as the current value. return ( <SelectedContext.Provider value="2"> <Box id="1">Box 1</Box> <Box id="2">Box 2</Box> <Box id="3">Box 3</Box> </SelectedContext.Provider> ); } See the Pen React Tutorial 3c by GreenSock (@GreenSock) on CodePen. Imperative Communication Passing around props or using Context works well in most situations, but using those mechanisms cause re-renders, which could hurt performance if you're constantly changing a value, like something based on the mouse position. To bypass React’s rendering phase, we can use the useImperativeHandle hook, and create an API for our component. const Circle = forwardRef((props, ref) => { const el = useRef(); useImperativeHandle(ref, () => { // return our API return { moveTo(x, y) { gsap.to(el.current, { x, y }); } }; }, []); return <div className="circle" ref={el}></div>; }); Whatever value the imperative hook returns will be forwarded as a ref function App() { const circleRef = useRef(); useEffect(() => { // doesn't trigger a render! circleRef.current.moveTo(300, 100); }, []); return ( <div className="app"> <Circle ref={circleRef} /> </div> ); } See the Pen React Tutorial 3d by GreenSock (@GreenSock) on CodePen. Creating reusable animations Creating reusable animations is a great way to keep your code clean while reducing your app’s file size. The simplest way to do this would be to call a function to create an animation. function fadeIn(target, vars) { return gsap.from(target, { opacity: 0, ...vars }); } function App() { const box = useRef(); useLayoutEffect(() => { const animation = fadeIn(box.current, { x: 100 }); }, []); return <div className="box" ref={box}>Hello</div>; } For a more declarative approach, you can create a component to handle the animation. function FadeIn({ children, vars }) { const el = useRef(); useLayoutEffect(() => { gsap.from(el.current.children, { opacity: 0, ...vars }); }, []); return <span ref={el}>{children}</span>; } function App() { return ( <FadeIn vars={{ x: 100 }}> <div className="box">Box</div> </FadeIn> ); } See the Pen React Reusable 1 by GreenSock (@GreenSock) on CodePen. If you want to use a React Fragment or animate a function component, you should pass in a ref for the target(s). Using gsap.effects GSAP provides a way to create reusable animations with registerEffect() function GsapEffect({ children, targetRef, effect, vars }) { useLayoutEffect(() => { if (gsap.effects[effect]) { gsap.effects[effect](targetRef.current, vars); } }, [effect]); return <>{children}</>; } function App() { const box = useRef(); return ( <GsapEffect targetRef={box} effect="spin"> <Box ref={box}>Hello</Box> </GsapEffect> ); } See the Pen React Reusable 6 by GreenSock (@GreenSock) on CodePen. Exit animations To animate elements that are exiting the DOM, we need to delay when React removes the element. We can do this by changing the component’s state after the animation has completed. function App() { const boxRef = useRef(); const [active, setActive] = useState(true); const remove = () => { gsap.to(boxRef.current, { opacity: 0, onComplete: () => setActive(false) }); }; return ( <div> <button onClick={remove}>Remove</button> { active ? <div ref={boxRef}>Box</div> : null } </div> ); } See the Pen React fade out 1 by GreenSock (@GreenSock) on CodePen. The same approach can be used when rendering elements from an array. function App() { const [items, setItems] = useState([ { id: 0 }, { id: 1 }, { id: 2 } ]); const removeItem = (value) => { setItems(prev => prev.filter(item => item !== value)); } const remove = (item, target) => { gsap.to(target, { opacity: 0, onComplete: () => removeItem(item) }); }; return ( <div> {items.map((item) => ( <div key={item.id} onClick={(e) => remove(item, e.currentTarget)}> Click Me </div> ))} </div> ); } See the Pen React fade out 2 by GreenSock (@GreenSock) on CodePen. However - you may have noticed the layout shift - this is typical of exit animations. The Flip plugin can be used to smooth this out. In this demo, we’re tapping into Flip’s onEnter and onLeave to define our animations. To trigger onLeave, we have to set display: none on the elements we want to animate out. See the Pen React Flip 2 by GreenSock (@GreenSock) on CodePen. Custom Hooks If you find yourself reusing the same logic over and over again, there’s a good chance you can extract that logic into a custom hook. Building your own Hooks lets you extract component logic into reusable functions. Let's take another look at registerEffect() with a custom hook function useGsapEffect(target, effect, vars) { const [animation, setAnimation] = useState(); useLayoutEffect(() => { setAnimation(gsap.effects[effect](target.current, vars)); }, [effect]); return animation; } function App() { const box = useRef(); const animation = useGsapEffect(box, "spin"); return <Box ref={box}>Hello</Box>; } See the Pen React Reusable 7 by GreenSock (@GreenSock) on CodePen. Here are some custom hooks we've written that we think you may find useful: useSelector Memoises GSAP’s selector utility. see demo on codepen function useSelector() { const ref = useRef(); const q = useMemo(() => gsap.utils.selector(ref), [ref]); return [q, ref]; } Usage: function App() { const [q, ref] = useSelector(); useEffect(() => { gsap.to(q(".box"), { x: 200 }); }, []); return ( <div ref={ref}> <div className="box">Hello</div> </div> ); } useArrayRef Adds refs to an array. see demo on codepen function useArrayRef() { const refs = useRef([]); refs.current = []; return [refs, (ref) => ref && refs.current.push(ref)]; } Usage: function App() { const [refs, setRef] = useArrayRef(); useEffect(() => { gsap.to(refs.current, { x: 200 }); }, []); return ( <div> <div className="box" ref={setRef}>Box 1</div> <div className="box" ref={setRef}>Box 2</div> <div className="box" ref={setRef}>Box 3</div> </div> ); } useStateRef This hook helps solve the problem of accessing stale values in your callbacks. It works exactly like useState, but returns a third value, a ref with the current state. see demo on codepen function useStateRef(defaultValue) { const [state, setState] = useState(defaultValue); const ref = useRef(state); const dispatch = useCallback((value) => { ref.current = typeof value === "function" ? value(ref.current) : value; setState(ref.current); }, []); return [state, dispatch, ref]; } Usage: const [count, setCount, countRef] = useStateRef(5); const [gsapCount, setGsapCount] = useState(0); useEffect(() => { gsap.to(box.current, { x: 200, repeat: -1, onRepeat: () => setGsapCount(countRef.current) }); }, []); useIsomorphicLayoutEffect You might see a warning if you use server-side rendering (SSR) with useLayoutEffect. You can get around this by conditionally using useEffect during server rendering. This hook will return useLayoutEffect when the code is running in the browser, and useEffect on the server. caveat: Any "from" state that doesn't match the server-side rendered HTML/CSS content will still suffer from a flash of unstyled content while the JavaScript is being parsed, run and hydrated. read more about useLayoutEffect and server rendering see demo on codepen const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; Usage: function App() { const box = useRef(); useIsomorphicLayoutEffect(() => { gsap.from(box.current, { opacity: 0 }); }, []); return ( <div> <div className="box" ref={box}>Hello</div> </div> ); } If there is anything you'd like to see included in this article, or if you have any feedback, please leave a comment below so that we can smooth out the learning curve for future animators. Good luck with your React projects and happy tweening!
Staggered Animations in ScrollTrigger
@ddi-web-team @Sygol @Yannis Yannakopoulos I whipped together a helper function that should make this quite easy. Check it out in this CodePen: https://codepen.io/GreenSock/pen/823312ec3785be7b25315ec2efd517d8?editors=0010 We may end up adding it as a static method on ScrollTrigger if there's enough interest. What do you think?
SVG stroke-dasharray quick tip
Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.
Thanks Greensock | SOTD & DEVELOPER on Awwwards. ??
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.
How to make elastic text scroll?
You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
Background parallax effect on mouse move
Here is very basic demo. You can change movement based on element you are animating. You can also use parallax.js which responds to gyroscope on mobile devices.
How to make animations and image load after the page is loaded
Hello @vibhor4all and welcome to the GreenSock Forum! Like @mikel advised you can check DOM and window. This way you only run your animation when the HTML, SVG, Canvas, and other assets are ready and loaded to be animated. It is best to wait until the DOM is ready then check if the window is loaded. Since both DOM ready and window loaded can fire at different times based on the server wait response and client building the DOM. Also its optional to also only run on the next requestAnimationFrame() to help prevent jank when first loaded. Wait until: DOM ready: Even if the window is loaded before the DOM, the window will fire immediately. window loaded: If the DOM is ready before the window is loaded the window will just fire when it is fully loaded. OPTIONAL - Run code on next render tick. Waits until next requestAnimationFrame() which prevents running code in the middle of render tick Vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets // you could also use addEventListener() instead window.onload = function() { // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick) window.requestAnimationFrame(function() { // GSAP custom code goes here }); }; }); Or the jQuery way: // wait until DOM is ready $(document).ready(function(){ // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets $(window).on("load", function(){ // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick) window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); But a codepen will be appreciated to help you better Resources: DomContentLoaded() : https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded requestAnimationFrame() : https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame window onload : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload Happy Tweening
Highlights: ScrollSmoother plugin for delicious, buttery-smooth scrolling that leverages native scroll. 💚 Observer plugin that greatly simplifies setup for reacting to various events across devices. gsap.quickTo() for frequent redirection to new values like mouse followers ScrollTrigger.normalizeScroll() solves a bunch of scroll-related annoyances across devices and browsers. "*=" and "/=" relative prefixes - multiply or divide the current value. Introducing ScrollSmoother.🥳 A shiny new plugin, exclusively for Club GreenSock members! ScrollSmoother makes it simple to add a buttery smooth vertical scrolling effect to your ScrollTrigger pages. Under the hood, ScrollSmoother leverages native scrolling which allows it to sidestep many of the accessibility annoyances that plague smooth-scrolling sites. No fake scrollbars, and no messing with pointer or touch functionality. See the Pen ScrollSmoother by GreenSock (@GreenSock) on CodePen. ScrollSmoother.create({ content: "#smooth-content", wrapper: "#smooth-wrapper", smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies ignoreMobileResize: true // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding }); Effects... ScrollSmoother will integrate seamlessly with all your scroll-triggered animations. but we've also added some bonus ScrollSmoother effects. ✨ speed - Great for parallax effects! It adjusts the speed at which an element moves vertically while scrolling through the viewport. A speed of 1 is normal speed, 2 is double speed, etc. lag - Add some lag* to gently flow elements behind the scroll before they ease back to their natural scroll position. * no seriously, trust us. It's the good kind of lag. <div data-speed="0.5"></div> <!-- half-speed of scroll --> <div data-speed="2"></div> <!-- double-speed of scroll --> <div data-speed="1"></div> <!-- normal speed of scroll --> <div data-lag="0.5"></div> <!-- takes 0.5 seconds to "catch up" --> <div data-lag="0.8"></div> <!-- takes 0.8 seconds to "catch up" --> Read the docs for all the juicy details, or pull up a seat and watch this short explainer video. Observer The brand new 3.5kb Observer plugin offers a super-flexible, unified way to sense meaningful events across all (touch/mouse/pointer) devices without wrestling with all the implementation details. Perhaps you want to respond to "scroll-like" user behavior which could be a mouse wheel spin, finger swipe on a touch device, a scrollbar drag, or a pointer press & drag...and of course you need directional data and velocity. No problem! Tell Observer which event types to watch (wheel, touch, pointer, and/or scroll) and it will collect delta values over the course of each requestAnimationFrame tick (debounced for performance by default) and automatically determine the biggest delta and then trigger the appropriate callback(s) like onUp, onDown, onDrag, etc. Look how easy it is to trigger next()/previous() functions based on when the user swipes up/down or uses their mouse wheel: Observer.create({ target: window, // can be any element (selector text is fine) type: "wheel,touch", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer") onUp: () => previous(), onDown: () => next(), }); Demo Notice there's no actual scrolling in the demo below but you can use your mouse wheel (or swipe on touch devices) to initiate movement so it "feels" like a scroll: Since ScrollTrigger leverages Observer internally for normalizeScroll(), we exposed it via ScrollTrigger.observe() so you don't have to load an extra file if you're already using ScrollTrigger. Excited? Why don't you observe this video or check out the docs (see what we did there?). gsap.quickTo() If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead. Think of a quickTo() like an optimized function tied to one particular numeric property, where it directly pipes a new number to it. Example let xTo = gsap.quickTo("#id", "x", {duration: 0.4, ease: "power3"}), yTo = gsap.quickTo("#id", "y", {duration: 0.4, ease: "power3"}); document.querySelector("#container").addEventListener("mousemove", e => { xTo(e.pageX); yTo(e.pageY); }); Mouse Follower Demo See the Pen gsap.quickTo() mouse follower by GreenSock ( @GreenSock) on CodePen. ScrollTrigger.normalizeScroll() and ignoreMobileResize Have you ever run into these problems?: Address bar on mobile browsers shows/hides and resizes the viewport, causing jumps When scrolling fast, a pinned element seems to shoot past for a brief moment and then jump to the correct pinned position (multi-thread synchronization issues) iOS jitter Overscroll behavior that seems impossible to prevent on iOS Inconsistent momentum scrolling across devices The powerful new normalizeScroll() functionality intercepts native browser scroll behavior and handles it on the JavaScript thread instead which solves the problems mentioned above on most devices (iOS Phones in portrait orientation still show/hide the address bar). To enable it, simply: ScrollTrigger.normalizeScroll(true); To prevent ScrollTrigger.refresh() from running (and recalculating start/end positions) when a mobile browser shows/hides its address bar, you can now do: ScrollTrigger.config({ ignoreMobileResize: true }); So easy! Read more in the docs. New "*=" and "/=" relative prefixes You've always been able to add or subtract from the current value, like: gsap.to(".box", { x: "+=100", // 100 more than the current value y: "-=100", // 100 less than the current value }); ...and now you can multiply or divide accordingly: gsap.to(".box", { x: "*=2", // double the current value y: "/=2", // halve the current value }); And more... GSAP 3.10 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
Curated Collection of GSAP Examples for Inspiration, with Code?
Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow. Talented coders that feature a ton of GSAP: Cassie Evans: https://codepen.io/cassie-codes Blake Bowen: https://codepen.io/osublake Carl Schooff: https://codepen.io/snorkltv Pete Barr: https://codepen.io/petebarr Steve Gardner: https://codepen.io/ste-vg Ryan Mulligan: https://codepen.io/hexagoncircle Tom Miller: https://codepen.io/creativeocean Chris Gannon: https://codepen.io/chrisgannon Darin Senneff: https://codepen.io/dsenneff Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome 🤣) It may not be exactly what you need, but there should some good inspiration in those accounts. Happy tweening.
GSAP Page Transitions in Next.js
Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.
OMG! I was about to get fired, ScrollSmoother saved my life
Hey, I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after). Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page. This is the repo url: https://github.com/rhernandog/gsap-flip-react Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js Here is the live sample: https://rhernandog.github.io/gsap-flip-react/ Based on your initial post in the thread, I take that you want to remove the elements from the DOM when they're animated out and mount them back, once they're animated in. Unfortunately, for work reasons I don't have enough time to add such feature to this sample, but this should be a good starting point for it and hopefully it will help you. When I have more time in the future I hope to be able to improve this sample. Happy Tweening!!!
Change MorphSVG and DrawSVG path start points
I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.
Read This First: How to Create a CodePen Demo
We love answering GSAP-related questions, but in order to get you a fast, accurate answer, it is very important that you provide code we can test. Your problem may be related to CSS, HTML, or JavaScript (or a mixture of those). If you only provide a tiny code snippet (outside of its context), it's difficult to diagnose. And it's just not practical to read large chunks of code in a forum post. We need code that we can dig into and play with...quickly. We are big fans of CodePen.io, an online editor that allows you to create (and share) demos that are easy to inspect and edit. They make isolating issues much faster. Watch How it is Done: GSAP 3 Starter Pen: https://codepen.io/GreenSock/pen/VoZNxw To create a demo with all of GSAP including every bonus plugin: Click the Edit on CodePen button Click the Fork button to create your own copy. Add the minimal amount of HTML, CSS and JavaScript necessary to replicate your issue. Save the pen Paste the URL of your pen (demo) into a new forum topic with a short description of the problem. Include OS, browser and device information where applicable. CodePen is completely free to use and you don't even have to sign up or log in. We do recommend creating a free account as it will allow you to save and organize your pens and much more. Some helpful tips to keep in mind: Isolate the problem. Create a demo from scratch. Don't copy your whole project. Make demos focused and concise. Use stand-ins for content. The special "trial versions" of the bonus plugins also work on the following domains: codesandbox.io stackblitz.com jsfiddle.net Use the pen below to easily copy and paste the urls to the bonus plugins: Additionally, if you are creating a follow up demo or want to continue making changes after you've gotten a solution please make sure to use the "Fork" button in the bottom right of the CodePen window. This will help context not to be lost in our forums when other people view the thread later and allows us to better keep track of how your demo is being changed. Thanks for your cooperation. We look forward to helping you.
I've made it to 2,000 posts!!
Hey GreenSockers, This is my 2,000th post so I wanted to take a minute to commemorate the occasion. It’s so much fun to hang out with all of you. As I’ve said before, this is truly a unique place on the web. The community is so friendly and smart and I learn a ton by reading through different approaches to problems and reverse engineering all the clever answers and demos. Thank you all for sharing your knowledge. A special thanks to @GreenSock and @Carl for putting up with me for 2,000 posts. Shout-out to all the other mods @Jonathan, @OSUblake, @Dipscom, @Sahil, @Rodrigo, @Shaun Gorneau, @Acccent, @Visual-Q, @mikel. You are a terrific group of people (and one A.I.) and I’m inspired by all of you. I hope my little SVG tips & tricks have helped some community members save some time and prevent a few headaches. I’m looking forward to continuing this never-ending journey of learning with the entire GreenSock community. Happy tweening. - Craig
Countdown with rolling numbers
Hi @Valeria Welcome to the forum and thank you for joining Club GreenSock. As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard. @Acccent - congratulations on your Moderator promotion. Well done!
Countdown with rolling numbers
Hi and welcome to the GreenSock forums!! A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need: I made a fork of it and changed a bit to simulate what you need: Hopefully this helps. Happy Tweening!!!
Inspiring HTML5 Banner Examples with GSAP
Hi dear community! I know you missed new releases with HERO banners. Today I present 3 of them! Please give us feedback if you like them. 1. World Of Tanks — Take Control Animation here 2. World Of Tanks — Video 360° Animation here 3. World Of Warships — Dunkirk Collaboration Animation here Thank you!
Liquid Button Using GSAP Library
Smooth scroll to whole page and trigger animations
Hi Federica, we went through GSAP only smooth scrolling in another forum thread. Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling. https://codepen.io/ihatetomatoes/pen/PoZLpbp Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable. Scroll responsibly
Five years of GSAP = motiontricks.com
By encourage I think he meant "incessantly bugged me for 2 years" Now, that Craig got his blog up, I'll move on to @OSUblake The world needs a GSAP + Pixi hero. Great job, Craig. I'm truly impressed. I can't wait to finish reading all of it. I'm sure motiontricks.com will be a tremendous resource for anyone learning and mastering GSAP. I'll whole-heartedly recommend it. When's the next post going live?
ScrollTrigger: toggleClass with object don't work
I'm so sorry about that - it was just a typo in the docs. It's "className", not "class". toggleClass: {targets: ".c, .a", className: "active"}
Congratulations Jack — 10,000 topics
Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.
Best compression for your banner assets
Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph
Drawing Drag and drop connectors between SVG elements
Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based. Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--) Nah I don’t accept that, my post was basic. Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @ZachSaucier @OSUblake , @PointC , @Jonathan , @mikel , @chrisgannon , @Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q, ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all ! These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.
Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better performance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:
Easing depending on distance, not time
Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.
Move elements on mousemove
If I understand correctly you could run a loop that tweens every box I suspect at some point the number of elements will impact performance. Hopefully this sparks some ideas. Good luck on your project
Countdown with rolling numbers
I got sliiiightly carried away and made this, haha. I don't if it will help because I saw @Rodrigo and @PointC had provided great answers so I didn't bother commenting the code, but feel free to ask if anything is intriguing. PointC, thanks! hehe
Hi @Raistlin That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too. The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle. Here's a basic example of what you could do: I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything. There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“@greensock is just pure awesomeness. What more can be said?”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.