Jump to content
GreenSock

Search the Community

Showing results for tags 'animation'.

  • 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. So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here
  2. Sukru

    Gsap lag problem

    Hello, my question is a bit of a general problem in gsap projects, where I first open the pages, it seems as if the page crashes and freezes, then the animations are active, I am sharing a few examples, where do I make a mistake, can you help? Look at the text animations in these examples, it stops at startup, then the animation starts, that's exactly my problem. https://additive.netlify.app/ App js > https://sukruemanet.netlify.app/assets/js/gsap/app.js https://sukruemanet.netlify.app/ App js > https://additive.netlify.app/assets/js/gsap/app.js https://clever-seahorse-227af4.netlify.app/ App js > https://clever-seahorse-227af4.netlify.app/assets/js/gsap/app.js
  3. Hello everyone, is it possible to implement the filling of the button on hover, from the point where the cursor came from? Let's say if from bottom to top, then the animation will go from bottom to top of the button and so on. I would be glad if someone shows the implementation at least from two sides. Thank You!
  4. Hi I am new to GSAP can you please guide me. I need gsap animation inside a slick slider where on each slider there will be gsap animation of images which will look like a video but I need this with full controls like next previous button. when i click on next button next slide should start from starting and same with previous button. Apart from this, there is a progress bar in bottom which will go with slides. Also, i have added codepen link where you can find slider functionality. I just need to insert gsap in this with smooth effect. Can you please check and guide me with the same. Thanks
  5. Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?
  6. GreenSock

    ScrollTrigger

    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos
  7. First of all thanks a lot for creating GSAP, it is amazing! I am new to gsap, I am working on a project where i intend to create 6 slides, which are both vertically and horizontally (fake-horizontally) scrollable. but withing one of those slides (2nd slide) I want to implement the below pen! I tried several approaches, but it does not seem to be working, I've been at it from 4 days straight, please help out! Approaches i tried: 1. simply added the code with some minor changes in "start and end positions" [ it did work, but there were 2 different scrollers, and not connected to each other] 2. tried horizontal: true [since it's "fake horizontal" it didn't work either] 3. containerAnimation -> well this almost worked, but "pin : true" cannot be used with containerAnimation. And i want the scroller to stay in view until the animation on 2nd slide is completely finished. any suggestions would be very helpful, thank you very much!
  8. 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
  9. Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
  10. Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
  11. A Question, is there any way of creating some graphs in GSAP? Like in the graphs in attached picture first line appears then 2nd and so on. I do not have extensive knowledge of GSAP, no idea if its possible in GSAP or not, if its possible in GSAP any help would be appreciated. Thank You
  12. I would like to get help, on how to slow down ScrollTrigger fromTo animations. The goal is to increase the duration of the animations (and the positon of the last fromTo), and this will make the animations slower. Since scrub turned true (to control the animation with the scrolling), the duration property does not have any effect. What am I missing? Thank you in advance for your help! tl = gsap.timeline({ scrollTrigger: { trigger: '.feature-holder', scrub: true, pin: true, pinSpacing: true, markers: false, }, }); tl .fromTo( '.feature-overlay', { autoAlpha: 0, }, { autoAlpha: 0.25, duration: 3, }, ) .fromTo( '.feature-text', { autoAlpha: 0, y: 5, }, { autoAlpha: 1, y: 0, duration: 1, }, '>', ) .fromTo( '.feature-text', { autoAlpha: 1, }, { autoAlpha: 0, duration: 1, }, '>+=10', );
  13. Hey thanks for your help! I'm a new coder and just discovered Green Sock. I'm trying to plug this into my website on Square Space and need help changing the images. I have several images uploaded to Imgur with url links ready to go but I can't seem to find out where to place those in html (after the <display layer> or <display block> divs), in css, or Javascript by replacing the code at the bottom that links to a set of randomized photo options. At this point I am lost and would appreciate any help you can give me. Thanks! Anna
  14. Please check the codepan , i want to scroll the content between the fixed div. but as of now the div is fixed but the inner content is not scrolled.
  15. Hello Scrollers ! First time I ask for some help on the forum, but I'm a bit stuck at the moment with my portfolio's slider. The idea is to have the thumbnail on the left, and the infos on the right. Everytime the user scrolls 100vh, the thumbnail and the infos change. this Codepen I found this codepen, which is close to what I am trying to achieve, but I still have three problems : I don't understand how, but the right side of the animation doesn't work properly. The first element should be at top:0 when the animation starts ; When the user scrolls, my element starts by going down, and then up, but it should directly go up ; I cannot figure out how to pin the right element until the user scrolls 100vh everytime + I don't understand why the other elements are still in opacity: 0, and not visible on screen. If anybody could enlighten me, it would be nice ! Thanks, A GSAP newbie
  16. Hey! I have a custom timeline UI (similar to the timeline in adobe after effects) where you can set keyframes for different properties like position, opacity, scale etc. I want to save those keyframes in a format like this { time: 1, value: { x: 100, y: 0 }} for the position and add them to the timeline animation. `time` is the position in the timeline where the element should have the x and y in `value`. I just can't figure out how I would set up the code without any additional calculations for the duration. Currently I have a timeline which should be always 3 seconds long and keyframes should be added to that timeline. This code just doesn't feel correct in my opinion because I would need to set the duration manually for each keyframe by checking if there is a keyframe before the current one and then using that time to calculate the duration. const timeline = gsap.timeline({ repeat: -1, duration: 3, paused: true, onUpdate: () => { // update UI } }) const prop = { x: 0, y: 0 } timeline.add( gsap.to(prop, { keyframes: [ { x: 100, y: 100, duration: 1 }, { x: 0, y: 0, duration: 1 } ] }) ) I hope it's understandable because I don't know how I should explain it well. Sorry for that! Can you please give me a hint how I would do this with gsap? I appreciate any help and advice! For reference: I want to "translate" a view like this into "gsap code".
  17. I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
  18. Hello everyone, Hope you are fine, sorry for my english. My animation must be played twice time when the page is loaded. I have this animation code but it no longuer work: const logo = document.querySelector('.logo'); const visual = document.querySelector('.visual'); const wording = document.querySelector(".wording"); const sequence = document.querySelectorAll(".sequence"); const tlAnim = gsap.timeline(); tlAnim .add(() => { wording.classList.add('hide'); logo.classList.add('hide'); }) // Visual .from(visual, { x:-500, duration:.3, opacity:0, delay:.5 }) .to(visual, { x:-350, duration:.3, opacity:0, delay:4 }) .add(() => { visual.classList.add('hide'); logo.classList.remove('hide'); logo.classList.add('show'); wording.classList.remove('hide'); wording.classList.add('show'); }) // Shop Informations .from(sequence, { opacity:0, duration:.3, stagger:.2 }) .to(sequence, { opacity:0, duration:.3, stagger:-0.2, delay:4 }) tlAnim.restart(); I hope to find some help Best regards Adel
  19. Hello folk i am trying to do like this slider and i make the base html, but i need your help of how i can make this animation , like first revele animation and those scroll, if there is any example that will be great, https://grege-interieurs.com/
  20. 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!
  21. I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
  22. Hello, I'm trying to make an animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but Safari just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay. Here is my animation code (I am using Vue.js) backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); }, Any ideas? Not sure where to start looking even. Thanks!
  23. Hello, I want to create this distortion effect when scrolling: video of the animation I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP. I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image. Furthermore, I want this animation to be vertical, not horizontal like in the video. If anyone can help me with an easy-to-understand solution, that would be awesome.
  24. I have question, I wanted reverse animation "showMenuList"(this is pink background), but this not working, where is mistake? I tried many methods but I failed, pls help
×