Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap3'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I'm working on an animation effect where the items appear as an overlay to the previous element on scroll, but when I use animation to translate Y, it adds extra white space at the bottom, which I don't want. I also experimented with the scroll snap effect. But that didn't work either.
  2. Hi, I'm very new to gsap and been trying to do this layout today but without any luck. In the pen you can see 4 items to the left, what I'm trying to achieve is to pin this items in the left and change the content in the right with the relevant one. the pen js is very small is where I started and i have been trying different things but I don't know if im going in the right direction I highlighted one of the items as an example of the result I'm looking for, when you scroll past certain offset the element goes to active and the content that shows is the relevant one, in this case, Ipsum would show Thank you very much if anyone can point me in the right direction.
  3. Please refer to the codepen and then third slide/section in the horizontal scroller. I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on. Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right. What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled. Thank you. 😃
  4. Hi Guys. I am new to GSAP, GSAP3 and scrollTrigger. I have been trying to implement some of the basics to learn how to use GSAP and ScrollTrigger. Please refer to the codePen. I am trying to make the letters (YEAH) in the first horizontal sliding section move up then down then up then down through the "scrubbed" animation. In other words, how do I make them go up and down multiple times instead of just the once. I have looked for examples and have been unable to find anything doing this. Can it be done?
  5. I've been scouring the archives and the web but can't seem to find out a proper workflow using Adobe Animate and GSAP if there is even one or is it even worth it. I am working off some files that were done by another developer and they seem to have used Adobe Animate for the HTML portion of is and then GSAP for the actual animation. I have been trying to break down how they managed to use both and can't seem to make it work in my head because everything that I pump out of Adobe Animate has a js file that is way overloaded with symbols and such. As I've mentioned elsewhere I am trying to get back into using GSAP so I am rusty as all get out. I may be asking the wrong question so there's that too! Any help would greatly appreciated. I guess I am missing the link between how to go from Animate to GSAP. Does the GSAP happen within the Animate file? Or is published and then coded.
  6. Hello, I'm trying to animate an image with the help of Draggable. I have adapted this example https://codepen.io/GreenSock/pen/mdVEpKK with my dragger, I don't understand why it's not working. Anyone can help me to understand? Thank you!
  7. My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)
  8. Hi all, I have several problems with the animation of my book. 1. I tried to make a rotateY on my book but the controls did not work on my code (play(), pause(), paused()), so I make a rotate in CSS that I disable by adding or removing a class 2. The animation works perfectly on the first opening and closing cycle, but on the following ones the currentAngle variable is buggy 3. I would like to be able to click on the book only if the animation is finished Here is my code : https://codesandbox.io/s/sad-mcnulty-7k49my I really need your help ;) Thanks to all
  9. 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
  10. I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning 😅. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks!
  11. I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up At my end its not working on scroll down but working fine with scroll up I have tried the following. import { useEffect, useRef } from 'react'; import { gsap, Power1 } from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; function WeHeard(props) { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const animation = gsap.timeline({ scrollTrigger: { trigger: ".hearedListing", scrub: true, start: "top 10%", end: "bottom top", markers:false } }).from('.hearedListing li', { x:300, autoAlpha:0, duration:4, stagger:2, ease: Power1.out }); }, []); return <> <section className="heared-listing hearedListing" > <div className="container"> <div className="row"> <div className="col-md-12 text-center"> <h2 className="animate-heading">We heard</h2> <ul className="list-unstyled primary-text-color h4 mt-5"> <li >Here is my line one</li> <li >Here is my line two</li> <li >Here is my line three</li> <li >Here is my line four</li> <li >Here is my line five</li> <li >Here is my line six</li> <li >Here is my line seven</li> <li >Here is my line eight</li> <li >Here is my line Ten</li> </ul> </div> </div> </div> </section> </> } export default WeHeard; I am created a codesandbox here
  12. I have a simple project with Angular 7 using GSAP 3. That's it works perfectly with comand 'ng serve' and 'ng build' of Angular CLI, but when I use the comand 'ng build --prod', the application throws the following error: "Uncaught TypeError: Cannot read property 'easeIn' of undefined". I think the problem just happens in AoT build mode of Angular. Could someone help me with this? Thanks!!
  13. hello everyone, i have created this codepen to swap text in the sticky box for each sections. and used scrollTrigger for each. if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts. thank you.
  14. Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html
  15. 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))".
  16. Hi Everyone!, I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP. It is very similar to this other codepen (https://codepen.io/justjoinednow/pen/MWVBQZg) Thank you
  17. Hello, tommorow I should show this gallery to some important people. The problem is, why on trigger 4 camera rotates 7 times around its axi? how can I solve it?
  18. Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects, but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way. What am I doing wrong? Thank you in advance, Matteo.
  19. hello i am jignasha please someone tell me how gsap3 scrolltrriger work with angular framework , i want one ball is moveing on scroll event in website
  20. I'm trying to create `pixel art`. I change `display` from `block` to `none`, because I don't need smooth transition. I used `stagger` to animate that, but when I do that, I observ, the first element's display doesn't change. But When I add, `opacity: 0` (*), it works as I want. * code, I talked about tl.from([svg1, svg2, svg3], { duration: 0.8, stagger: 0.4, display: "none", opacity: 0, repeat: -1, }); No idea, what's the problem, and why this occurs...
  21. 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
  22. 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!
  23. Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
  24. Hello Everyone, I'm tying to get the same effect like this: https://brand.denso.com/en/ I am a beginner with GSAP as well as ScrollTrigger. I have tried It like the codepen demo down below , I could change the angle for sliding to upperleft but that is not working properly. Please help me to archive this effect using GSAP and ScrollTrigger. Thanks,
  25. Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that gsap.utils.selector(someRef) ... useEffect(() => { gsap.to(someRef('.s1'), { duration: 1, x: 800, scrollTrigger: someRef('.s2'), }); }); ... not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help. gsap.utils.selector(someRef) ... useEffect(() => { gsap.to('.s1', { duration: 1, x: 800, scrollTrigger: '.s2', }); }); ... Here is the original code that I was working on import gsap from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import React, { useEffect, useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Home() { const containerRef = useRef(); const container = gsap.utils.selector(containerRef); const test = useRef(); useEffect(() => { gsap.to(container('.s1'), { duration: 1, x: 800, scrollTrigger: container('.s2'), }); }); return ( <> <div ref={containerRef} className='container-wrapper'> <div className='hero section'></div> <div className='about section'> <div className='s1'></div> <div className='s2'></div> </div> <div className='skills section'></div> </div> <style jsx>{` .section { height: 100vh; width: 100%; } .hero { background-color: red; } .about { background-color: green; } .skills { background-color: blue; } .s1 { width: 200px; height: 200px; background-color: white; } .s2 { margin-top: 400px; width: 200px; height: 200px; background-color: black; } `}</style> </> ); }
×