Jump to content
GreenSock

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

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. I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product. Like it is done here (scroll down to the second section after landing page): https://simbasleep.com/ Any suggestions?
  2. The animation is not looping smooth/continuously because of the delay in the end. How can I make it not stop for a second in the end of the animation like it does on the Codepen?
  3. It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can
  4. Hello I'm new to GSAP animation. I add animation with jQuery it's working for the first time if you click on the " Green button " in the top right corner. I need to make the animation reverse also but when it's complete animation does not work second time. Please help Thanks.
  5. Hi, I am a back end developer and have very least knowledge of JavaScript but I can understand code. I have been finding out whole day the code or logic used by https://travelshift.com/ they used to create top banner/slider which changes the slide/image by long click (about 1 second). I used chrome extension Wappalyzer and came to know that its using GSAP. I have been finding something similar but could not get any working code example. Can anyone please provide some similar example with code or any article link please. Also I want to know this animation name so I can google it better way.
  6. Hi, I am quite new to gsap. One problem I have, is that when I reverse the timeline, or just make an animation, that scales something down. It leaves the outline on the element, multible times along the path in took. This makes the animation cumpletly useless, since it looks like crap. Im sure this is a bug, and can be fixed, but how? I've linked the file below. Thanks in advance :) test.html
  7. Hello GreenSock community 😀 hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I
  8. Hi, Aphalina Animator is a visual authoring tool that produces human-readable gsap + svg code. I just launched version 1.2 with some new features: path motion, hand-drawing imitation, clip masks, sprite sheets, sequence animations (similar to GSAP staging). It is paid app but can be used for free for non-commercial projects. Project link is aphalina.com. Any feedback is highly appreciated!
  9. Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  10. I've been using this for a while, it's not perfect but the idea behind it I guess is to generate multiple banners with minimal effort plus a presentable preview link, with backup images. https://github.com/bastole/dc-richmedia-automation-template If anyone can review or comment on what can be done for improvementr, it'd be great! cheers
  11. Hi guys. Just wondering if it would be possible to use GSAP for animating simple page transitions in React? I have my index.js file rendering my app: // React Common Modules import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import Reducer f
  12. Hi all. This is my first post on the forum! I was hoping for some advice with a scroll based interaction I am working on. Essentially I have a fullscreen panel, containing a video and an H1 positioned on top (in reality I think the H1 will be an SVG logo). I am looking to have the H1's position on the Yaxis adjusted as you scroll down the page, effectively going in the opposite direction to normal, and disappearing from view out the bottom of its parent container. I have built this out the best I can so far using a gsap timeline and scroll event on the window.
  13. I am trying to make a image slider, with same effects shown in the below video url https://youtu.be/VfIfy5fZLhM I have this code below: this.tl.from("#panel1", 4, {autoAlpha:0, ease: Sine.easeInOut}) .set("#panel2", {top:0}, "+=2") .from("#panel2", 6, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut}) .set("#panel3", {top:0}, "+=2") .from("#panel3", 8, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut}) I am trying to achieve the same image effect shown in the video [zoom in, out and second image is sliding inside]. Can someone please he
  14. Hi guys, I am new to GSAP animations, I love everything about this framework. It has made so many lengthy tasks very simple, short and fast too. But unfortunately I am stuck at one point. If you go to my codepen demo, when you click on 'button', you will see a stagger animation which is working fine. I have 6 boxes there and the 5th and 6th number boxes overlaps the 1st and 2nd. I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in.
  15. 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
  16. Hello GSAP community, I am so incredibly impressed with ScrollTrigger - love it! Imagine multiple ScrollTrigger-based stories (eg, three characters), that offer different versions of a story. Upon scrolling to the bottom of the first story, the user is able to view the other two stories. Currently, the HTML looks something like this: <section class="person" id="person1"> <!-- stuff --> </section> <section class="person height-0" id="person2"> <!-- stuff --> </section> <section class="person height-0" id="perso
  17. create the bazier bath and card with rotate in globe so that it can create its path and rotate arround the globab like this in the pic how to create this ?
  18. I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider
  19. Hey guys So i am making a project with gsap3 kind of like the apple airpod website I have like 500 + images and on scroll these images are being rendered in the canvas. I want to animate some text which will depend on the frame count the sequence is - frame ==0 animate in some text frame>0 animate out the previous text frame>10 again animate in some text frame>200 animate out the previous text so it goes... can some one tell me how can i do this in a efficient way. Thanks
  20. 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.
  21. I have build an scroll animation with a timeline and scrub, and I want to control it, with adding pause to it and with running multiple things at the same time. How can I do this?
  22. Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
  23. Good day everyone. I have just completed my personal portfolio site which makes use of GSAP. However, it seems the animations are not playing and so the page remains blank. Everything works fine on my local server but when I uploaded my website to the dreamhost servers, the animations no longer work. There are no errors whatsoever on the console. I contacted the customer service and was told that in my error.log file it says the folder where all my GSAP.js files are located cannot be found. But looking at my panel, all files were uploaded successfully. Ok, in order to be sure it was not just t
  24. I am using BarbaJS for creating my Portfolio by using a <ul> for creating a Page-Transition. I have set up GSAP Animations and Many More such as AutotypeJS but they aren't getting fired neither are the CSS is getting applied after the Page transition is done. Once I refresh the page, The Animations gets fired. What could be the possible reason? gsap.from('.btn-blue', { opacity: 0, duration: 0.5, delay: 21, y: 50 }); gsap.from('.anim1', { opacity: 0, y: -100,
  25. As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll. When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. Here is a simple example. Like the form on that website, I want my image but in the center of viewport. If you don't understand please let me know.
×