Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation since 10/20/2020 in all areas

  1. 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.
    16 points
  2. Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Hope this helps.
    12 points
  3. 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
    9 points
  4. Looping back with a codepen. ✨ https://codepen.io/cassie-codes/pen/zYdxopE
    8 points
  5. Hi Sandy! You're animating <g> elements, so you're scaling a container. You need to get more granular and target the shapes. And I would set the transform origin ahead of time. For example, your circles could be like this. gsap.set("#circles circle", { transformOrigin: "50% 50%" }); ... .from("#circles circle",{opacity:0,scale:0,duration:2}) But it would probably better to just give your circles the same class name to make target easier. <g> <circle class="circles st6" cx="775.79" cy="197.35" r="5.81"/> <circle class="circles st6" cx="370.82" cy="55.65" r="5.81"/> <circle class="circles st7" cx="595.77" cy="70.42" r="5.81"/> </g> The zigzag could be done with the DrawSVGPlugin, or maybe by animating a clipPath. For beginners, I would recommend checking out @PointC's MotionTricks and @Carl's CreativeCodingClub.
    8 points
  6. Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM: https://codepen.io/GreenSock/pen/abWLgwY?editors=0010 🎉 That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value.
    8 points
  7. oh, ok, probably best to continue in that thread. It was very nice for @Ali Manuel to help you but we don't typically have the capacity to rebuild other people's projects on demand with new specifications. While I'm here though I believe making this full-screen will require some significant changes to the CSS and it's not really something that you would do with GSAP. If you have a question related to GreenSock animation please don't hesitate to ask.
    8 points
  8. 🤔 Well, I'm also not sure what the desired outcome is here. But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does. In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might be better suited than the other, depending on what you want to do, I guess). Here is an example with ScrollTrigger's smoothScroll() helper-function included for the smooth-scrolling effect (first example pen on the .scrollerProxy() documentation page). Maybe that helps get in the right direction https://codepen.io/akapowl/pen/d48ab3a40f7f8614db9e6f460c331704
    8 points
  9. Okay, I think I get it. I made a couple demos for you. I used a wider path just so it's easier to see what's happening. You could use gradientTransform like in your 2nd demo, but I'm not sure that gets the desired result and I have no idea about browser compatability on that one. https://codepen.io/PointC/pen/a774175618d8c17aa07fcd59e28119ed My preference would be to animate the x1/x2/y1/y2 attributes. I'd also use objectBoundingBox (default) for the gradientUnits. In this case I find it a bit easier to use values from 0 → 1 rather than keep track of absolute coordinates when using userSpaceOnUse. https://codepen.io/PointC/pen/jOBwLWw Here's a fork of your pen with option 2. https://codepen.io/PointC/pen/cae50d4609e6e0e8a1b44811aa3d278d Hopefully that helps.
    8 points
  10. I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. https://codepen.io/waaark/pen/VbgwEM https://codepen.io/Zaku/pen/JNxKKY
    8 points
  11. 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!!!
    8 points
  12. Hey @maxvia I am no react guy, so I can not tell you on how to implement this with react, but I can show you one example of how to achieve this sort of effect. ***** Please take note of the Edit added to the bottom of this post with regard to the setup ***** It is pretty straight to get there with ScrollTrigger and this being all the JS you need for this version: gsap.set('section.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover .to('section.footer-container', { yPercent: 0, ease: 'none' }) ; ScrollTrigger.create({ trigger: 'section.conclusion', start: 'top top', end: '+=75%', animation: uncover, scrub: true, }) in combination with these CSS keypoints (related to the JS) section { width: 100vw; height: 100vh; } footer { height: 75vh; width: 100vw; overflow: hidden; } section.footer-container { height: 75vh; } in this possible HTML markup <section class="intro"></section> <section class="description"></section> <section class="conclusion"></section> <footer class="footer"> <section class="footer-container"> </section> </footer> What is basically going on here (as well as in on the page you linked to, I think) is that from a certain point on, the initially on the y-axis set up .footer-container is being animated downwards. But since the amount it is being animated down is less, than the amount of the scroll that is moving things up, it appears, that it is simply just scrolling slower than the rest from further down. Hope this explenation somehow makes sense to you. Here is a very basic demo https://codepen.io/akapowl/pen/51ad2dfcf2ff34e11c1f7fa8f6be11bf Here is one in combination with smooth-scrollbar for the smooth-scrolling effect similar to what they have on their site https://codepen.io/akapowl/pen/e10646738ea5ff087a5f27e2960beb8a And here is one with extra edge-easing ( when coming closer to the top / bottom of the page ) applied to smooth-scrollbar, because to me it feels, they have something like that on their page, too https://codepen.io/akapowl/pen/a229bb24e2d94079ccc8e874639aa79f Very neat effect you chose there. It was fun building those demos out. Hope they help you. Cheers, Paul Edit: I updated all of the demos above. The way I had things set up initially ( with the start of the ScrollTrigger set to 'top top' ) this would only have worked, if the section before the footer would have had a height of 100vh. This isn't neccessary at all though, if you simply set the start of the ScrollTrigger to 'bottom bottom' instead. The section before the footer can have any height now.
    8 points
  13. React is a hugely popular framework 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 PlaygroundsOnline Playgrounds Get started quickly by forking one of these starter templates: CodePen CodeSandbox CodeSandbox + Bonus Plugins Create a new React AppCreate 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 elementsTargeting 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 animationCreating 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 elementsTargeting 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 timelinesCreating a timeline 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.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 statereacting 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 interactionAnimating 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)avoiding 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 React doesn’t run it until 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 UpCleaning 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.
    7 points
  14. Hi and welcome to the GreenSock forums, thanks for providing the demo. it seems your animation is set up to start with the menu open and then close it. I forced the animation to it's end (closed state) using progress(1) at the end of the timeline. it also seems your css is set up so that the page loads with the menu items visible. I set the opacity to 0 in the css and toggle it back to 1 once the page is loaded using gsap.set(".menu-overlay", {opacity:1}) https://codepen.io/snorkltv/pen/PojVQLv?editors=0110
    7 points
  15. Hi @Sibteali Baqar Welcome to the forum. Looks like the problem is that your orbit path (#ellipse_1) is a filled path so the circle wouldn't animate along it as you expect. I've created a little demo using your SVG. The path you were using has no fill and a red stroke. See how the circle would orbit along the outside of that path? Probably not what you want here. I added a simple ellipse and converted it to a path to show you that everything is working correctly with the MotionPathPlugin. I'd think an actual ellipse would be the easiest method here. https://codepen.io/PointC/pen/576a99f87ecf0a9aea713b8beb894f00 Hopefully that helps. If you have additional questions, you'll need to create a demo. Just strip it down to the minimum like I did above and we'll be able to provide the most accurate and helpful answers. Happy tweening and welcome aboard.
    7 points
  16. Hey DoPhuongAnh, Welcome to the GreenSock Forum. It's a lot of fun: a color 'kaleidoscope'. https://codepen.io/mikeK/pen/powWwMm Happy scrolling ... Mikel
    7 points
  17. Hey DoPhuongAnh and welcome to the GreenSock forums. Here's how I'd break down this effect: Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point. Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference. Keep a reference of which part is currently active. Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1. Hopefully that will help you get a bit further than where you are now
    7 points
  18. *** UPDATE 9/10/21 THIS PROMOTION HAS ENDED *** Hey All, I'm doing a test run of a special promotion for all Club GreenSock members (Green, Shockingly, and Business). If you've invested your money in the awesome bonus plugins and the ongoing support of the platform I'm happy to offer you 50% savings on Lifetime access to my comprehensive and extremely specialized GreenSock training available at www.CreativeCodingClub.com. For those that don't know, I've spent nearly a decade in these forums and 7 years working at GreenSock helping folks learn the ins-and-outs of the platform. The Creative Coding Club courses are in simplest terms a collection of all the tips and tricks I've learned throughout the years helping frontend developers excel at GreenSock animation and avoid common beginner pitfalls. Unlike typical "one and done" courses, the Creative Coding Club is a subscription-model that gives you access to 5 premium courses PLUS new lessons every week (over 120 now). If you've spent any time in the GreenSock docs or these forums you've probably encountered my videos and demos so I'm not going to bombard you with a hard sell... just a killer deal: 50% off a Lifetime Subscription to Creative Coding Club (exp 9/8/21) To get this deal you just have to send me a Personal Message (PM) through the GreenSock site requesting a coupon code. Once logged into the GreenSock site follow these instructions Once I receive your message I'll confirm your Club GreenSock membership status (by viewing your profile) and send you a coupon code. I'll do my best to get it to you quickly (within 2-12 hours), but understand I do sleep and work Please review the following before purchase: This promotion is being run by Creative Coding Club. GreenSock isn't involved with the selling, maintenance, or delivery of this training. I offer a 28-day 100% money back guarantee. Just send me a note requesting a refund and it's yours. This offer is only available to new Creative Coding Club students. This offer is only available to people with an active Club GreenSock membership. This offer is only available to 1 member of a Multi-Developer Club GreenSock account. Contact me for info on team plans. You must request your coupon prior to 9/8/21. Coupons must be used before 9/15/21. Let's keep this simple. If you're a Club GreenSock member and ready to commit to mastering the art of GreenSock animation through my Creative Coding Club courses and weekly lessons, send me a personal message (as outlined above) and I'll get you going. Carl *** UPDATE 9/10/21 THIS PROMOTION HAS ENDED *** Not a Club GreenSock member? Well, this is the best time to join Club GreenSock, gain access to the bonus plugins, AND grab this incredible deal on my training. Remember, to get 50% off my training you must be a Club GreenSock member prior to enrolling. If you're not a Club GreenSock member but still would like me to guide you on your training journey I have a little something for you too. Save 20% on 1 Year or Lifetime memberships to Creative Coding Club (exp 9/8/21) Visit creativeCodingClub.com Select 1 Year or Lifetime plan Use code: gsforums at checkout
    7 points
  19. 🐸 https://codepen.io/GreenSock/pen/NWgrqpG?editors=1111
    7 points
  20. It is an interesting challenge...I got sucked in and whipped together this solution: https://codepen.io/GreenSock/pen/powvxNx?editors=0010 It basically uses a "y" animation to fake the scroll on sections that are taller than the window height. Is that what you were looking for?
    7 points
  21. my advice would be to create 1 timeline that does the full circle animation. tween the progress of that timeline to any value you want below the progressTl shows the syntax for tweening the progress of the circle's timeline (tl). you can create tweens any way you want and pass them the progress from the data attributes or whatever. https://codepen.io/snorkltv/pen/mdmYVEL?editors=1010 hopefully this points you in a direction that works for you. also, if you just need to animate the stroke of a circle, it would be much easier using DrawSVG:
    7 points
  22. I took a slightly different approach. I created a timeline for each circle. (I removed the groups as they aren't really necessary here). This way you can copy/paste in more circles and the animation will adjust accordingly. The secret with the scale tween is just the same as @elegantseagulls did. Make the duration half of the orbit and use a yoyo tween. https://codepen.io/PointC/pen/xxqrqby Hopefully that helps. Obviously you can adjust durations and eases to your liking. Happy tweening.
    7 points
  23. Hi @rcneil, You can just add another tween to take care of scaleing. Something like: gsap.to("#graphic-1", { duration:5, repeat: -1, ease: "none", scale: .2, yoyo: true, }); would do the trick. Looking at your animation, though here's a few things that could help simplify: 1: Combine the graphics into a single tween and loop/offset them with stagger 2: Comnbine motionPath and scale tweens into a single timeline Check it here: https://codepen.io/ryan_labar/pen/rNywmLX?editors=0010
    7 points
  24. @Jim Nayzium, A tween is just that, a single tween of one or more properties on a matched element or elements. A single element https://codepen.io/sgorneau/pen/wvJKVwK Multiple matched elements https://codepen.io/sgorneau/pen/GRWpVKV A timeline contains one or more tweens that have timing controls to dictate when they begin and end on the timeline. The can begin relative to the timeline (at absolute positions .. like 0, 5, 20) , relative to each other ("+=3", "-=2",), or at named labels ("someLable"). You would use a timeline where sequencing is necessary. A simple timeline https://codepen.io/sgorneau/pen/eYvpqYG A more complex timeline https://codepen.io/sgorneau/pen/gOmaVpO?editors=0010 As far as variables go, with regard to both a tween and a timeline, a variable is used to reference that tween or timeline in the future. It's that simple. Neither require a variable, but it can make life easier to store them in variables at times, especially timelines. With the "more complex" timeline above, things are good ... until I need to dynamically add to the timeline or manipulate in some way later (pause, reverse, etc.). There is no reference to it. Once I'm stop chaining methods .. it's done. But, if I hold it in a variable to reference, I can do a lot with it. I can add tweens to it based on future logic, I can reverse it. I can jump to a specific timestamp or label. https://codepen.io/sgorneau/pen/jOBbgqB
    7 points
  25. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
    7 points
  26. In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. For example, trying to animate from this: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); to this: clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%) wasn't working, but when I changed the zero values to percentages, it worked perfectly. // From clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) // To clip-path: polygon(-100% 0%, -100% 0%, -100% 100%, -100% 100%)
    7 points
  27. My recipe a little trial & error and remove the ****. https://codepen.io/mikeK/pen/VwwwGrd Happy morphing ... Mikel
    7 points
  28. lol. then that's probably a good place to stop. Unfortunately, the many folks like @PointC that have volunteered countless hours of their time over the years don't often have the luxury of making sure that every line of code is understandable to everyone of every skill level that passes by. The original poster was already satisfied so there's really no need for a committee to come in to do a code review. If you have an alternative, cleaner solution that would certainly be a welcome addition that would add value to the thread. If something isn't clear you can simply ask for an explanation. That's much better than calling it "over-engineered" and yet somehow at the same time criticizing it for not being forward-thinking enough to handle an ad-server injecting an ad into the middle of it 🙄 It's great that you started in this thread by trying to help. That's exactly what makes this place so great. There's loads of opportunity to help people, offer solutions, be a part of the community, make it better, and have your own voice around here. Stay positive, offer solutions, and you'll be amazed at how much more fun it is around here and how much you discover along the way!
    7 points
  29. Greensock is incomparable, and I just wanted to say thank you @GreenSock and all parties involved for making this unbelievable product.
    7 points
  30. We're looking for an independent front-end developer and creative technologist who loves animation and helping people. A great fit for this role would be someone who is: Independent – This role has a lot of independence. We’re looking for someone who is comfortable with being given an idea and running with it. When they see something that needs improvement, they take initiative and either tackle it themselves or delegate it to the appropriate person. A community builder – A major part of this role is investing into the GSAP and animation community both in the GSAP forums and beyond. Responsible – With so much flexibility, this role requires someone who is reliable and able to hold themselves accountable as well as keep track of and prioritize tasks. This is not a job for someone who needs to be told each day what to work on. Entrepreneurial – GreenSock is a small company and the person in this role can help shape the direction of the company and its products. We’re looking for a sharp go-getter. Responsibilities Answer questions and facilitate these forums alongside the current moderators. Basically the "Chief Moderator" assisting the community. Generate and implement ideas to help people use GSAP more effectively. Tutorials, demos, videos, etc. Maintain the GreenSock website (content and the front-end code). Manage GreenSock's social media presence (Twitter, CodePen, Facebook). Help spread the word. Generate and implement ideas that make GreenSock more profitable and useful to the developer community. Required skills A solid understanding of the fundamentals of HTML, CSS, JavaScript, and SVG Experience with GSAP Debugging skills, especially JavaScript Some experience working with git, modules, and front-end frameworks Bonuses Expert-level experience in animating various web technologies (WebGL, SVG, Canvas, CSS, and libraries/frameworks) A good sense of visual design A good sense of motion design Experience teaching others Experience building communities Experience creating videos React experience Back-end experience, especially InVision Power Systems (IPS) experience Perks Flexible hours Work 100% remotely Interested? Email us your resume along with links to the animations you're most proud of working on. Or you can send me a direct message via the forums.
    7 points
  31. Hey @sorciereus, You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ... https://codepen.io/mikeK/pen/PobOwjN Happy landing ... Mikel
    7 points
  32. Hey, A little experiment on how ScrollTrigger and snap could be used. Just for info. Happy tweening ... Mikel
    7 points
  33. Hi and welcome to the GreenSock forums, Thanks so much for the clear demo. You can use an onComplete callback to apply clearProp:"all" to remove the inline styles. Be sure to inspect your box after the animation runs in the demo below https://codepen.io/snorkltv/pen/bGrVwxv?editors=1010 more on clearProps: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops this video on callbacks and scope may help too
    6 points
  34. Hi @Anael_, welcome to the forum ! 💚 There are many ways to solve this and I created one for you 🙂. The problem when using position absolute is that you lose the .container dimension (width, height) and if the elements were not positioned with position absolute animation can get weird. So I created this, only animating the transform x, y, calculating the container dimensions and the left position of the element. https://codepen.io/nicofonseca/pen/XWareXV?editors=0110 I hope this helps 🙌
    6 points
  35. This is a really fun place to start - https://beginnerjavascript.com/
    6 points
  36. Hey Kitson, I've removed scrollTrigger so you can see how the animation is set up without being linked to the scroll. https://codepen.io/GreenSock/pen/yLXJyQY?editors=1010 // create a timeline gsap.timeline() // set all image blocks apart from the center to visibility hidden and opacity 0 .set(".gridBlock:not(.centerBlock)", { autoAlpha: 0 }) // animate the image blocks apart from the center to visibility visible and opacity 1 .to(".gridBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001) // scale up the container to it's full size from a third of it's size .from(".gridLayer", { scale: 3.3333, ease: "none", }); Then that animation is tied to scroll using our ScrollTrigger plugin. Does this help - Is there a specific part that you have questions about?
    6 points
  37. @GreenSock that is amazing - exactly what I wanted to achieve! Thank you for showing up a good way to solve this 🙌🏻 Let me add this compliment to you and all other users: when I was searching for solutions yesterday and was looking through this forum there were so many posts that showed people helping others very generously and hands-on like this one. This is a fantastic community here! I hope to dig deeper and also be of help in the future
    6 points
  38. Hi @PG1 Building a robust timeline visualizer would be quite an undertaking. I created a video to explain how the getChildren() method can be used to grab animations from a timeline, get their start times and durations, and then use that info to build a rudimentary visualization Once you start throwing in staggers, nested timelines, and tweens that target multiple elements things get complicated fast. This video is just meant to introduce you to some of the basic concepts.
    6 points
  39. These are just callbacks. It calls the provided function when the timeline reaches that spot. Callbacks don't return values, so anything you return is ignored by the timeline. If you create an animation inside a callback, it will of course run, but it won't be added to timeline. tl.add(spinAnimation); tl.add(moveAnimation); The parentheses executes the function, which in this case returns an animation, which will add it to the timeline. tl.add(spinAnimation()); tl.add(moveAnimation()); Same as doing this. tl.add( gsap.timeline() .to(".card0", { x: "-30px", duration: 0.5, ease: "power4.inOut" }).to(".card0", { x: "0px", duration: 1, ease: "power2.inOut" }) )
    6 points
  40. Hey @ThePixelPixie you can do something like this. Send the color you want to the function in order to animate https://codepen.io/nicofonseca/pen/ecfe39fecf06caa658105d4536da694a
    6 points
  41. Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. https://codepen.io/mikeK/pen/vYgGqLB Happy tweening ... Mikel
    6 points
  42. Hey there @GGQa You will have to find a way within the logic of swiper to toggle the opacity. Swiper is not a GreenSock product and thus support for it is actually not offered in these forums. Here you'll find a list of events for swiper.js https://swiperjs.com/swiper-api#events One very basic way could be to use swiper's slideChangeTransitionEnd event to tween all images to opacity 0 but/and the one in the swiper slide that is active to 1. Something like in this example below - but I have no idea if it is the best way to do it, as I'm not very firm with swiper. Anyone having a better approach is of course welcome to help, but in general these forums try to stay focussed on GSAP-specific questions. Hope that helps, though. https://codepen.io/akapowl/pen/8b5fd3a7d0ecddcbeb7a230b49fe13db Edit: Here are two more approaches for the tween itself. One is using a forEach loop (commented out here) and one is using function based values with the target passed into the function. Both utilize a ternary operator for the tween to check wether the target's parentElement (the swiper-slide container) has a class of swiper-slide-active - if it does, the opacity will be tweened to 1, else it will be tweened to 0. https://codepen.io/akapowl/pen/85cca33c373c2ca1d789f681150d9e8a
    6 points
  43. Hey @christanto, Welcome to the GreenSock Forum. This example could give you some pointers. https://codepen.io/mikeK/pen/KKWNvNL?editors=1010 Happy scrolling ... Mikel
    6 points
  44. thx, it looks like I wasn't following you perfectly there. however, I think there is some confusion about when onEnterBack happens. I modified your demo to only include one section. I added a little callback that changes the background color of the page when onEnterBack happens. https://codepen.io/snorkltv/pen/XWMpXyd?editors=0010 Scroll up and down all the way. You will see that the animation does not reset when onEnterBack fires. It only resets onLeaveBack (4th toggle action) as you have it set that way. //onEnter, onLeave, onEnterBack, onLeaveBack toggleActions: "play pause none reset", My understanding remains: onEnterBack is set to none and is behaving as you have it set up. onLeaveBack is set to reset and this is why your animation resets. Does this make sense? Am I missing something else still?
    6 points
  45. This is great. What a fantastic design to bring to life! There are some nice subtleties that work very well. I don't think there's a better way to learn than to be tinkering on something like this. It makes me VERY happy to see that a student of mine can do this stuff in such little time! Great job! - but also KEEP going!
    6 points
  46. Ah, I chased this down to a decimal precision thing. Basically, GSAP rounds to the closest 4 decimal places in order to solve various problems like: Binary math rounding. Example: 4 % 0.8 should be 0.8 but computers return 0.7999999999999998, so rounding fixes that Too many decimal places can cause the browser to introduce scientific notation and then if that gets put into a string (like for CSS when you've got units), 0.0000001 could become 1e-7 which can cause failures when the browser tries to read that value back in. Like 1e-7px - the browser is like "huh?" Memory savings for strings. For example, SVG path data strings have a lot of numbers crammed into them, so reducing the number of decimal places can save quite a bit of characters that get shoved into that string. However, when you've got a super long timeline and ScrollTrigger scrubs the progress (a value between 0 and 1), those decimal places represent more timeline real estate. In other words, going from 0.0002 to 0.0003 can feel like a bit of a jump. In the next GSAP release, I'll add two extra decimal places on generic value tweens (this doesn't affect CSS, for example). Here's a fork of your CodePen with that beta file in place: https://codepen.io/GreenSock/pen/KKWdLRE?editors=0010 (Nothing changed except the core GSAP file) Better? The reason Gannon's didn't exhibit that behavior was because it was using a totally different technique that was creating a new tween on every update, and that tween was animating the frame number which doesn't have the tiny decimals that a progress value would. It's far less efficient, but it appeared smoother due to the rounding stuff which is only apparent in long animations where those extremely small decimals represented larger chunks of time. Make sense?
    6 points
  47. Hi and welcome to the GreenSock forums. So glad you provided a demo with most of it working. Saved me loads of time! The trick here is that we are not going to add the stars scene1() animation to the main timeline. We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want). Note that scene1() now just returns a timeline. I added GSDevTools so that you can see that the main timeline has a finite duration https://codepen.io/snorkltv/pen/JjErJvP?editors=0010 This video explains tweenTo() in detail Great job on the demo!
    6 points
  48. For the mask issue, you'll want to use a group inside your masked group and animate that rather than the masked group itself. https://codepen.io/PointC/pen/7207e8e3f2290baa6e24f057fc290c5e For the rapid clicks, I'd probably check to see if the element is tweening and return if true. You could also create a timeline and use the up/down buttons to increment/decrement the position of the group. Just my two cents. Happy tweening.
    6 points
  49. Hey @Olga__Kondr, Look at this example https://codepen.io/mikeK/pen/36a752bc230ab2a00834148779bce4ec ... or this https://codepen.io/mikeK/pen/cd75b815a0298372fe786f66e6b1e7db?editors=0010 Happy scrolling ... Mikel
    6 points
×