Jump to content

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

Search the Community

Showing results for tags 'gsap3'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello I'm going to make a digital book like a flipbook. By looking at the tutorials, I was able to make a typical right-to-left example, but the pages are not as soft as the pages of a real book. https://codesandbox.io/s/flipbook-rtl-k8w8f?file=/src/App.js:845-849
  2. If you find yourself writing multiple tweens to animate one target, it may be time to reach for keyframes. Keyframes are a great way to move a target through a series of steps while keeping your code concise. Take a repetitive timeline like the one below — It can be simplified down nicely to fit into one tween: // timeline let tl = gsap.timeline(); tl.to(".box", { x: 100 }) .to(".box", { y: 100 }) .to(".box", { x: 0 }) .to(".box", { y: 0 }); // Array-based keyframes gsap.to(".box", { keyframes: { x: [0, 100, 100, 0, 0], y: [0, 0, 100, 100, 0], ease: "power1.inOut" }, duration: 2 }); We like to think of keyframes as a sub-timeline nested inside a tween. There are a few different ways to write keyframes. If you're a visual learner, check out this video. Keyframe Options Object keyframes - v3.0 This keyframes syntax lets you pass in an Array of vars parameters to use for the given target(s). Think of them like a sequence of .to() tween vars. You can use a delay value to create gaps or overlaps. The default per-keyframe ease is linear which you can override in individual keyframes. You can also apply an ease to the entire keyframe sequence. gsap.to(".elem", { keyframes: [ {x: 100, duration: 1, ease: 'sine.out'}, // finetune with individual eases {y: 200, duration: 1, delay: 0.5}, // create a 0.5 second gap {rotation: 360, duration: 2, delay: -0.25} // overlap by 0.25 seconds ], ease: 'expo.inOut' // ease the entire keyframe block }); Percentage keyframes - v3.9 This familiar syntax makes porting animations over from CSS a breeze! Instead of using delays and duration in the keyframe object, you specify an overall duration on the tween itself, then define the position of each keyframe using percentages. To be consistent with CSS behaviour, the default per-keyframe ease is power1.inOut which generally looks quite nice but you can override this in individual keyframes or on all keyframes using easeEach. gsap.to(".elem", { keyframes: { "0%": { x: 100, y: 100}, "75%": { x: 0, y: 0, ease: 'sine.out'}, // finetune with individual eases "100%": { x: 50, y: 50 }, easeEach: 'expo.inOut' // ease between keyframes }, ease: 'none' // ease the entire keyframe block duration: 2, }) Simple Array-based keyframes - v3.9 Just define an Array of values and they'll get equally distributed over the time specified in the tween. The default per-keyframe ease is power1.inOut, but you can override this by using easeEach. The Arrays do not need to have the same number of elements. gsap.to(".elem", { keyframes: { x: [100, 0, 50], y: [100, 0, 50] easeEach: 'sine.inOut' // ease between keyframes ease: 'expo.out' // ease the entire keyframe block }, duration: 2, }) Easing keyframes Easing is integral to animation and keyframes give you a huge amount of flexibility. Percentage keyframes and Simple keyframes allow you to control the ease between each of the keyframes with easeEach. See the Pen Keyframe easing by GreenSock (@GreenSock) on CodePen. With Object keyframes and Percentage keyframes you can drill down and add different eases into individual keyframes. See the Pen Bounce Party with GSAP keyframes, by GreenSock (@GreenSock) on CodePen. You can even combine multiple easing properties, keyframes and normal tween values. 🤯 gsap.to(".box", { keyframes: { y: [0, 80, -10, 30, 0], ease: "none", // <- ease across the entire set of keyframes (defaults to the one defined in the tween, or "none" if one isn't defined there) easeEach: "power2.inOut" // <- ease between each keyframe (defaults to "power1.inOut") }, rotate: 180, ease: "elastic", // <- the "normal" part of the tween. In this case, it affects "rotate" because it's outside the keyframes duration: 5, stagger: 0.2 }); See the Pen keyframe easing by GreenSock (@GreenSock) on CodePen. Keyframe tips Both the Object keyframes and the Percentage keyframes behave similarly to tweens, so you can leverage callbacks like onStart and onComplete. gsap.to(".elem", { keyframes: [ {x: 100, duration: 1}, {y: 200, duration: 1, onComplete: () => { console.log('complete')}}, {rotation: 360, duration: 2, delay: -0.25, ease: 'sine.out'} ] }); gsap.to(".elem", { keyframes: { "0%": { x: 100, y: 100}, "75%": { x: 0, y: 0, ease: 'power3.inOut'}, "100%": { x: 50, y: 50, ease: 'none', onStart: () => { console.log('start')} } }, duration: 2, }) We hope this has helped you get your head around keyframes - if you have any questions pop over to our forums. Happy tweening!
  3. So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function. I don't know why, I also don't get any errors. let rotationSnap = 90; Draggable.create(vinyl, { type:"rotation", OnDrag: () => console.log('works'), snap: function(endValue) { console.log(endValue); console.log(Math.round(endValue / rotationSnap) * rotationSnap) //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. return Math.round(endValue / rotationSnap) * rotationSnap; } }) }
  4. Hi! I find on documantation page property startAt What different between .fromTo and startAt? What are the features of using startAt
  5. Hello green fellas! What I'm trying to accomplish is I think very simple but I'm still stuck on it. This is what I want when an user scroll : -> while the user is scrolling, the div must appear slowly (with opacity) at the center of the screen -> when opacity is at 1, keep it like that and do nothing for some defined px/vh while keep scrolling -> when those px/vh are ended then change the opacity from 1 to 0 while user keep scrolling -> go to next div/section and do the same So the div must appear on the center of the screen and disapear on the center of the screen. (And I need to do the same with the following div's). Here is a codepen of what I tried. Thanks a lot in advance for your help!
  6. Hi GSAP champs, Soon, I'm going to start working on a project which is a product landing page full of GSAP animations. So, currently we're planning to go with GatsbyJs & one an only GSAP. The animations required in that landing page: DrawSVG ( is it free?) Pinning ScrollTrigger So, I wanna confirm that does GSAP & GatsbyJs have full support for the GSAP, I mentioned above ? any useful resource or help or guidance would be appreciated. Thanks
  7. I have simple animation. It works just once. Is there a simple way solve that problem? Thanks!
  8. Everything works fine, but only once. How to solve that?
  9. hi guys, i need your help, it's been a couple days that i'm trying to solve this. i have a box wich contains SVGs that are draggable, that box needs its box-sizing to be "content-box", and the draggable SVGs bounds needs to be inside the box (not touching the borders) that's why i created a bounds-box which take 100% width and height of the parent box, and set the draggable bounds to that bounds-box, it works fine , the only problem is when i zoom in or out, the bounds change after dragging the svg around and u can see that the bounds got -1px on every side. thank you.
  10. Hi! I need to create a counter, but it must be integer. No need numbers after comma (dot).
  11. Hi! I create some demo with image source. I'm trying to make pinned image sequence on GSAP 3. Reference: https://store.google.com/us/product/nest_doorbell_battery?hl=en-US#gq-overview-chap-intro-3 I've found some example but they are implemented on canvas and they user sprite. I dont need to use sprite. Example №1: https://codepen.io/osublake/pen/KKzgqKr Example №2: https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6 I need other way. I know that's not GSAP product but I want to implement same thing Like ScrollMagic + gsap image sequence https://scrollmagic.io/examples/expert/image_sequence.htmlhttps://scrollmagic.io/examples/expert/image_sequence.html I cant figute it out, how to make it on gsap 3 only. Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?
  12. Hi! I'v read articles how to control video in timeline but I dont have idea how to make same video animation like here https://store.google.com/us/product/nest_cam_battery?hl=en-US I builded some minimal demo. So what I want: Play video till 3-4 sec PAUSE, then when video in the middle of the screen of viewport it continues play.
  13. Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ? I will post a codepen later as I started my project directly in local. Thank you
  14. Workflow in Visual Studio Code, Windows 10: 1) First I created a fresh React project with: npx create-react-app my-project 2) Then I downloaded the 'GSAP 3 with Shockingly Green bonus files' ZIP file, version 3.8.0 3) and added the gsap-bonus.tgz in the root directory of my project 4) When I installed the file with : my-project > npm install ./gsap-bonus.tgz, I received the message: added 1 package, and audited 1946 packages in 10s, 58 vulnerabilities (16 moderate, 40 high, 2 critical) 5) After installation: my package.json file looks the same as in the 'module install' video. How can there be that many vulnerabilities in an 'up-to-date' GSAP installation, and do I need to fix this ?
  15. hi all, I am trying to add animation to carousel. I am using ngx-slick-carousel for carousel. All animations are working fine but one. when i am swiping the slide, the animation is not taking effect. Animation is working pretty well before and after swipe complete. I want animation to be done while swiping. here is the code: let cards = currentCardBox.querySelectorAll('.card-body') let slideNum = e.currentSlide gsap.to(cards[slideNum+1], { scaleY:1.5, scrollTrigger: { trigger: cards[slideNum], start: 'left 30%', end: "-=100", scrub: true, horizontal: true, markers: true }, }); Q : What I am trying to achieve ? Ans: when the hero card swipes to left, next to hero card become hero card with some animation. Thanks for the help..
  16. Hi Everyone, I have been working on the project involving WebXR, using ThreeJs and Gsap 3. And I have notice that when you initialize webXR session (clicking on 'Enter VR' button) update of Gsap's timelines just stops. They mention in How to create VR content on ThreeJs' website that you need to call setAnimationLoop() from their renderer and to pass callback and that you can't use window.requestAnimationFrame() function (I need to investigate this topic more). The problem was solved calling gsap.ticker.tick() from the callback function. For testing, I have added listener to gsap.ticker and it was working fine when webXR session is not initialized. Is there a better method to update gsap timelines, and am I missing something? I used Oculus Quest for headset and Oculus Browser which is based on Chromium.
  17. Hi everyone, I am new to GSAP. trying to create a Shrinking header animation. I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..
  18. Hello everyone, I'm facing problem in creating this effect in horizontal scroll. https://codepen.io/eighthday/pen/MKqBjX I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo. This is what I did. https://codepen.io/aniketbamotra/pen/wvJrNjr PS. I'm new to web development and this is my first time using gsap so help me with this. Thanks in advance
  19. Hi there, I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks https://codepen.io/onseyi/project/editor/DeWepm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin:0; width: 100%; height: 3000px; background:#dfdfdf; overflow-x: hidden; } #rec { position: absolute; width: 150px; height: 100px; background-color: #8894aa; } </style> </head> <body> <div id="rec"></div> <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000"> <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84 c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96 c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/> </svg> <script src="gsap.min.js"></script> <script src="MotionPathPlugin.min.js""></script> <script> gsap.registerPlugin(MotionPathPlugin); gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); gsap.to("#rec",{duration:5, motionPath:{ path:"#path", autoRotate: true } }); </script> </body> </html> index.html
  20. setu

    From Top to Bottom

    Hi all, I was trying to replicate a website here is the link of the site https://space.ge/ . i did all the parts of website except the card one that moves from top till end of the page . i tries doing few stuff like pinning and animating based on position but none of them were successful also those aproches are not dynamic enough . so any body have any idea how to achieve that.
  21. I'm trying to make a simple slider that animates-in then out one slide after the other according to the currentStep variable, which gets incremented by 1 at the end of every slide, but nonetheless , I end up getting the same slide over and over again and can't figure out why...
  22. I am very much confused with the all these libraries.. On the homepage it says all in one .. You just need to import gsap single file. Then on examples i see people have included scrollTo and scrolltrigger separately. Then i see all these libraries are paid. There is no simple table which can tell the difference between free and paid gsap apart from community benefits. Is it like we get some features in pro that are not in free version?? If that is the case all of those codepen are useless for newcomers, because i might be trying hours on some feature which is eventually paid and i am not aware of those. Please can you please resolve the questions ?
  23. Hi All, I am trying to animate something using scroll trigger (minimal reproducible example in codepen link ). I want to scale the circle to 1 when scroll progress is 25%. And for that reason I tried setting the timeline duration to 4 and the animation duration to 1 but it doesn't work. It still takes the full progress of the scroll trigger to make it scale to 1. Your help is highly appreciated. Thanks Edit: Codepen doesn't seem to be working. Here is a code sandbox instead https://codesandbox.io/s/gsap-scrolll-blimx?file=/src/App.js:0-1097
  24. Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M.