Jump to content

Search the Community

Showing results for tags 'gsap'.

  • 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. I dont have a codepen to show or reproduce what my large scale app does but I am using fabric.js to create animations on canvas and have multiple slides to convert it to a slideshow or video. All i can share is a small snippet of where i call the functions at certain time i.e particular card.duration (which can take decimals as well). But the next function is called before the designated absolute duration. All I want to know if timeline accepts millisecs and makes gauranteed call at that particular time! totalDuration = 0; for (let i = 0; i < cardLinkedList.length; i++) { const card = cardLinkedList[i]; timeline.call( textAnimation, [canvas, card, transition, logo], totalDuration ); totalDuration += card.duration; } timeline.play();
  2. Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in canvas. But the problem is that these can be different forms of drawing. I thought it would be great if we could svg load a certain mask and display circles in it, which would be animated following mouse over. Such a mask could be made as a single path(mask). However, frankly speaking, I don't know how to do this or if it's possible to do it. I would be very grateful for any help and examples. Thank you.
  3. I used gsap.fromto animate a component when it is rendered through a conditional statement something like below: const [openComponent, setOpenComponent] = useState(false); <button onClick={_=>setOpenComponent(true)}>Open</button> return {openComponent && <Component/>} and in the Component.jsI used useEffectto render the animation useEffect(_ => { gsap.set(ref.current, { y: 0 }); gsap.from(ref.current, { y: "-100%", duration: 0.5, ease: "expo.out", }); }, []); However, the Componentsometimes rendered in its original position (y=0) before starting the animation. It means you will see a flick of the component before the animation starts. When I changed useEffectto useLayoutEffect, it doesn't happen. I have another component called Loading which uses a similar logic as above and the flick doesn't happen. I went through the forum and found this post It is true that the Component has a React.fragment (Loading doesn't have React.fragment)but when I removed it, the flick still happens unless I use useLayoutEffect. Another difference of the Loading from the Component is that Loading is less complicated. Component structure: <div> <div> <div> <p></p> <div> <span></span> <span></span> </div> </div> <div> <p></p> </div> <div> <p></p> </div> </div> </div> Loading structure: <div> <img/> </div> Here is a video example (Ignore the watermark😅) issue-2_sMe3OB4K_Skcz.mp4 I am not familiar with codepen or any other online editors to code a React in it and make an example. Sorry for the inconvenience. 😁😅
  4. GreenSock


    CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties. Note that the video is using GSAP 2 format. Demo: CustomWiggle Types Options wiggles (Integer) - Number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - tThe type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - Provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - Provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example CodePen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, and ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. gsap.to(".class", {duration: 2, rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); gsap.to(".class", {duration: 2, rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. Download CustomWiggle CustomWiggle and CustomBounce are membership benefits of Club GreenSock. It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today. Note: CustomWiggle is not in the GitHub repository or CDN; it's only available for download at GreenSock.com. Demos 
 CustomWiggle Demos
  5. Hello, I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'. My JS is let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", stagger: 1, scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured. I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them. Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK
  6. Hi! I was wondering if someone could help me, as I am about to lauch this site in which I have an animation for which I'm using ScrollTrigger with from() to a position absolute + scroll magic. The problem is that in some cases in desktop and always in mobile, the elements (images and divs) render before de animation starts. I mean, there are elements that should start with Opacity 0 but they first appear (so you already see thins of the animation before starting) and then, after some seconds they turn to be in the way they should for begining the animation. I know that it's very helpfull for you to help me if i put everything on a code pen, but i can't upload the images. So I left all the code, and here I share the link of the web so you can see it. http://losderechosnoseaislan.com/home1.html If someone could help me, i would be pleased cause i'm in a hurry. Thanks in advance!!!!
  7. I made a simple animation which is by translating the Y axis from 1em to -50%. However, there was some weird calculations that happened on the #issue element. I purposely set the duration to 5seconds so that it will be more obvious. I also faced the same problem stated above but I couldn't recreate the problem i was facing. It was a project that I was working on using react hooks. It might be browser problem as when i tested my project in Firefox, the problem is the same as the problem in the codepen and when tested in Edge and Chrome it works perfectly fine. I originally planned to report this in Bugzilla but then when i was preparing the codepen, the problem happened in both Firefox and Edge. The HTML layout, CSS and JS is exactly the same in my project and in codepen but i got different results which is weird. They are both affected by the CSS property: flex-direction. If you comment it out, it works as expected. PS: The problem I stated might sound confusing... sorry for that if it is. I am very new to GSAP too... Edit: It seems like the preview here is working fine but when I go to the link it is not... Edit2: As I am not allowed to upload more than 500kB file, I will share a clip of the problem in this google drive link
  8. Hi guys, I built a page with multiple animations using GSAP and ScrollTrigger, this is the page Open Screenplay. The animations are very good but I need to add transitions between the sections but I don't how I can do it. The transitions that I need to apply are bounce transition like this https://connect-homes.com/process and overlap transition like this http://www.espn.com/espn/eticket/story?page=Dock-Ellis. Thanks in advance.
  9. Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please.
  10. Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do? Thank you guys so much for all your help now and in the past! Here is my CodeSandbox
  11. Hello Guys, I have used the gsap marquee effect but I am getting some issue when marquee effect repeats. It is working fine on first time when it repeat the second time, it shows some gap and after some time it shows the content. I want to make it smooth and infinite loop without any gap. I am unable to fix this issue. Anybody please help me on this? I will appreciate your help. Thanks in advance!
  12. So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll?
  13. Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  14. I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
  15. <template lang="pug"> .container(ref='container') .container__wrap .hoge .hoge__item(style='background:red') .hoge__item(style='background:green') .hoge__item(style='background:blue') </template> <script> import Scrollbar from 'smooth-scrollbar' import gsap from "gsap" // eslint-disable-line import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js" // eslint-disable-line class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {// eslint-disable-line static pluginName = 'horizontalScroll' transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta } const { x, y } = delta return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, // x: Math.sign(x || y) * Math.sqrt(x*x + y*y), } } } export default { mounted() { gsap.registerPlugin(ScrollTrigger) this.scrollbarOnTrigger() this.animation() }, methods: { scrollbarOnTrigger() { const el = document.body // const el = this.$refs.container // const el = this.$('.container') Scrollbar.use(HorizontalScrollPlugin) const bodyScrollBar = Scrollbar.init(el, { damping: 0.1, alwaysShowTracks: true, continuousScrolling: false, delegateTo: document, syncCallbacks: true, }) ScrollTrigger.scrollerProxy(el, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value } return bodyScrollBar.scrollLeft }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, }) bodyScrollBar.addListener(ScrollTrigger.update) }, animation() { gsap.utils.toArray('.hoge__item').forEach((el, i) => { gsap.to(el, { opacity: 0.5, scrollTrigger: { trigger: el, scrub: true, horizontal: true, }, }) }) }, }, } </script> <style lang="sass" scoped> .container &__wrap display: flex .hoge display: flex &__item height: 100vh width: 100vw </style> Say hello 👋 I'm currently using Nuxt, smooth-scrollbar.js and gsap's scrollTrigger to create a product. The above code is an example of scrolling horizontally when scrolling vertically and the animation moves with ScrollTrigger. However, the above code has a problem: when the value of the variable "el" in the scrollbarOnTrigger function is set to something like this.$refs.container, the scrollTrigger animation doesn't work for some reason. If anyone has the brains to solve this, please answer me. I don't understand English, so I'm relying on DeepL. If there are words I don't understand, please let me know.
  16. SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Configuration options 6:35 Animation View the JS panel in the CodePen demo above to see how easy it is to: Split text into words and characters. Pass the chars array into a from() tween for animation. Revert the text back to its pre-split state when you are done animating. Additional features and notes You can specify a new class to be added to each split element and also add an auto-incrementing class like .word1, .word2, .word3 etc. View demo You don't have to manually insert <br>tags, SplitText honors natural line breaks. SplitText doesn't force non-breaking spaces into the divs like many other solutions on the web do. SplitText is not designed to work with SVG <text> nodes. Learn more in our detailed SplitText API documentation. Please visit our SplitText Codepen Collection for more demos of SplitText in action. Where can I get it? SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools like InertiaPlugin as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible. To learn how to include SplitText into your project, see the GSAP install docs. Demos SplitText Demos
  17. Hello, I'm using SplitText to add animation to lines of text based on the following example: gsap.from(split.lines, {duration: 1, x: 200, autoAlpha: 0, ease: "power3", stagger: 0.05}); The animation is working as expected. However, as the text is split into separate tags it means that it's not responsive and leaves whitespace (which is shown in the gsap example). Is there any way around this? Any help would be appreciated. Thanks
  18. I aam trying to achieve https://www.brewsandgrooves.com this kind of smoothness with cross browsing really need for my portfolio
  19. Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
  20. Like all new members to the forum, I've found an effect that I'm hoping can be achieved with GSAP. https://www.craftedbygc.com/ A sort of abstract-like liquid flow. I'd love to mask it behind an SVG logo. https://peeke.nl/simulating-blobs-of-fluid But like all first posts in this forum - I have absolutely 0 idea where to start. Any pointers would be amazing! Thank you community ❤️
  21. Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some lag when I have too many timelines, especially with the start position adding +=180% for each timeline... (by the 20th background the start is at +=3420%... ) I'm new to all of this so I apologise if any of my questions seem obvious. Any help is appreciated, thanks in advance!
  22. oOLucOo

    JPG Sequence GSAP

    Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button> <canvas id="canvas"></canvas> JAVASCRIPT var baseURL = "anim3/"; var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); var sprite = { frame: 1, lastFrame: 240, totalFrames: 240, textures: [] }; var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 100, roundProps: "frame", ease: Linear.easeNone }); var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 150, roundProps: "frame", ease: Linear.easeNone }); var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 2, roundProps: "frame", ease: Linear.easeNone }); loadTextures(sprite.totalFrames) .then(resizeCanvas) .catch(function(reason) { console.log(reason) }); function drawSprite() { // No changes if (sprite.frame === sprite.lastFrame) { return; } context.drawImage(sprite.textures[sprite.frame], 0, 0); sprite.lastFrame = sprite.frame; } function resizeCanvas(textures) { var texture = textures[0]; sprite.textures = textures; canvas.width = texture.naturalWidth || texture.width; canvas.height = texture.naturalHeight || texture.height; canvas.classList.add("is-loaded"); var aspectRatio = canvas.height / canvas.width; // BASE base_image = new Image(); base_image.src = 'anim3/animhead_01.jpg'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); } } function loadTextures(numTextures) { var promises = []; for (var i = 1; i <= numTextures; i++) { var index = i < 100 ? "0" + i : i; promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg")); } return Promise.all(promises); } function loadTexture(path) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { resolve(img); } img.onerror = function() { reject("Error loading " + path); }; img.src = path; }); } $( ".btn1" ).click(function() { animation.play(); }); $( ".btn2" ).click(function() { animation2.play(); }); $( ".btn3" ).click(function() { animation3.play(); }); Someone can help me ? Thank you.
  23. I have a circle which is supposed to be transformed in the direction of the cursor all time. node.addEventListener("mousemove", e => { const {x, y, width, height} = blob.current.getBoundingClientRect(); gsap.timeline() .to(blob.current, { duration: 10, x: e.clientX - (x + width / 2), y: e.clientY - (y + height / 2), force3D: true, overwrite: "auto", ease: Linear.easeNone }, 0) }) This is fine, but includes unwanted behavior: when being further away from the circle and rapidly changing direction and distance from the circle, there obviously will be a change in speed since the distance for the circle to travel in this 10 seconds gets shorter/longer. How can I ensure the same travel speed all the time, no matter where the cursor is?
  24. Hi - I'm not sure why but I can't get a simple color tween working, and I can't seem to find anything in the documentation that explains it. I've created a codepen here with what I feel should be the proper implementation. https://codepen.io/heaversm/pen/poyXmXg
  25. So I have a simple GSAP timeline to move an element with the direction of the mouse' event: node.addEventListener("mousemove", e => { const x = e.clientX / 10; const y = e.clientY / 10; gsap.timeline() .to(blurRef.current, { yPercent: -30, x, y, duration: 1 }, 0) }) It works fine, but I want to add an infinite bounce effect which happens simultaneous to the mouse animation. I've done the bounce effect only before with pure css, but this makes GSAP stop working (mouse effect won't work). Is there a way to handle both simultaneously? Is there an equivalent for the CSS with GSAP? .blur { animation: bounce 2s infinite ease-in-out; } @keyframes bounce { 0% { transform: translateY(-10px) } 50% { transform: translateY(15px) } 100% { transform: translateY(-10px) } }