Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • 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. Hi folks! I need help to implement a new timeline from tweens that are building into a loop. (btw, I use as a base this pen https://codepen.io/osublake/pen/ExPMgQq, credits to Blake Bowen) If is use a gsap.exportRoot() into a const, I have control over the timeline (but there isn't apply to use into a component) . So but I use tl.add(tween) into the loop I can't reach the same result . Also I tried with tl.add(tween, 0) but isn't work for me. Surely I'm doing something wrong, but I can't discover what, so if you can help me I will be appreciated. Thanks. 😊
  2. 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. It all works as it should, it doesn't really feel great and can be a little jerky to begin with... so my questions would be... Is my approach suitable for this ? Are there any quick wins I could make to improve it? Or should it be done another way eg. scrollTrigger ? (No idea how to do this atm) Any advice greatly appreciated. Many Thanks!
  3. Hi, i am just getting to know gsap and i have a little problem :/. I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out. const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const menuBtn = useRef(null) const tl = useRef() const toggleOpen = () => { setIsOpen(!isOpen) } useEffect(() => { const nav = menuRef.current const mainMenuLists = [...nav.querySelectorAll("ul:nth-of-type(1) li")] const socialLists = [...nav.querySelectorAll("ul:nth-of-type(2) li")] const btn = menuBtn.current const upLine = btn.querySelector("span:nth-of-type(1)") const centerLine = btn.querySelector("span:nth-of-type(2)") const downLine = btn.querySelector("span:nth-of-type(3)") tl.current = gsap .timeline() .to([upLine, downLine], { y: "-50%", duration: 0.3 }) .to(upLine, { duration: 0.1, rotation: 45 }, 0.2) .to(downLine, { duration: 0.1, rotation: -45 }, 0.2) .to(centerLine, { duration: 0.1, autoAlpha: 0 }, 0.2) .to(nav, { x: "0", duration: 0.5, autoAlpha: 1 }) .staggerFromTo( mainMenuLists, 1, { x: "-=15px", autoAlpha: 0 }, { x: "0", autoAlpha: 1 }, 0.2 ) .staggerFromTo( socialLists, 0.5, { y: "+=3px", autoAlpha: 0 }, { y: "0", autoAlpha: 1 }, 0.1 ) .reverse() }, []) useEffect(() => { tl.current.reversed(!isOpen) }, [isOpen]) return ( <HeaderComponent> <Logo> <AniLink path="/" hex="#333"> <LogoImg /> </AniLink> </Logo> <OpenMenuBtn ref={menuBtn} onClick={toggleOpen}> <span /> <span /> <span /> </OpenMenuBtn> <Nav menuRef={menuRef} setIsOpen={setIsOpen} /> </HeaderComponent> ) } const Nav = styled.nav` position: fixed; top: 0; left: 0; bottom: 0; right: 0; transform: translateX(100%); background-color: #ccc; z-index: 99; ` const Navigation = ({ setIsOpen, menuRef}) => { return ( <Nav ref={menuRef} onClick={() => setIsOpen(false)}> ... </Nav> ) } I think i know what the problem is. Timeline is created when the component is mounted and the first time the menu is opened it pops up getting translate (0). When I close the menu, the animation returns back and gsap assigns to the translate (x), value from the start of the animation. because the animation is set to reverse (I know it's obvious) . I wonder if there is any possibility to change the value of position x only when the animation returns?(Because I can't/ i don't know how do this animation differently: D) https://ibb.co/f8Y0Tg5 short demo
  4. Hi everybody! I have a problem configuring a menu animations. That's my 5th version. I realised the best way is to use master timeline. But, trying to put it all together, I get an unpredictable behavior. Animation for showing/hiding dimmer works great. dimmer_tl .fromTo(dimmer, {opacity: 0, display: 'block'}, {opacity: 1}) .set(js_dimmer, {display: 'block'}) .add('show') .to(dimmer, {opacity: 0, display: 'none'}) .set(js_dimmer, {display: 'none'}) .add('hide') dimmer_tl.tweenTo('show'); dimmer_tl.tweenTo('hide'); But truing to do the same with menu background doesn't work :( bg_tl .fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1}) .add('show_list') .fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1}) .add('show_search') .to(bg, {opacity: 0, display: 'none'}) .add('hide') bg_tl.tweenTo('show_list'); bg_tl.tweenTo('hide'); It feels like the animation on show_list is not pausing and going threw all of them bg_tl .fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1}) .add('show_list') // .fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1}) // .add('show_search') // .to(bg, {opacity: 0, display: 'none'}) // .add('hide') Or maybe I'm trying to reinvent the wheel and there are better practices to control? I'm glad to hear any suggestions. Thanks! P.S. Also moving mouse really fast between links play a timeline through all of them. I guess I need to add a delay somewhere but every time I do so it's just breaking apart.
  5. 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) } }
  6. Hello Club Green Sock! I was reading about the common Scroll Trigger mistakes looking for a solution to this question. I think may be going about this the wrong way, but... I have a timeline let hardwareTimeLine = gsap.timeline({ scrollTrigger: { trigger: ".centering-container", scrub: true, pin: true, pinSpacing: true, start: "top", end: "150%" } }); hardwareTimeLine .from(".hero-header", {}) .fromTo(".animated-header", {autoAlpha: 1, top: "29%"}, {autoAlpha: 0, top: "27%"}) .fromTo(".scaling-container", {duration: 1, scaleX: 1.6, scaleY: 1.6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, {duration: 1, scaleX: .6, scaleY: .6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, "<") .fromTo(".screen-inner-1", {duration: .5, transform: "translateX(0)"}, {duration: .5, transform: "translateX(-103%)"}) .fromTo(".screen-inner-2", {duration: .5, transform: "translateX(103%)"}, {duration: .5, transform: "translateX(0)"}, "<") .from(".icons-tray", {y: 150, autoAlpha: 0}); and I was wondering if there was a way to put a tween inside the timeline that is attached to the Scroll Trigger at the very end of my last ".from", if that makes sense? I tried .tweenTo() but that didn't seem to give the effect I am searching for. For example (see my codepen, you may need to look it at on full screen) I would like the grey box (".icons-tray") to tween up on it's own and only be started by the scroll trigger. Can anyone point me in the right direction of the way to approach this effect or have a working demo that shows this? Thank you so much!!!
  7. Hi there, I am very new to javascript and trying to keep the code readable. I want my timeline to be in a separate function and being played and reversed on a button click. However, the animation only fires forward, but never backwards and I cant get my head around it. If I put the timeline into the constructor method it suddenly works, but not if putting it into a separate function. The codepen is a very simplified version for the main issue. I'd glad if someone could lend me a helping hand. If you have better suggestions how to structure the code, I am very open to learn something. Just want to write it as clean as possible.
  8. Hey Club Greensock! I was just wondering if I could get some assistance on my project. I have a pretty good base (I think). I just had a couple questions and was wondering if someone might be able to give me some ideas and direction. In my pinned timeline, I have a container that I scale down. I am wondering how might one go about how to decrease the pin spacing as this timeline progresses? As you can see in the image, there is a huge gap due to the scale down. Is there a way to adjust the pinspacing so the final resting place of the animation obeys the global defaults I have setup for the section container? If that makes sense? Specifically if you look at my pen on chrome, there is a weird thing it's doing where there's like a slight margin that is revealing the background slide as it moves. It doesn't do this on FF. Tell me if there is a better way to do this, but basically I have the laptop as a png, the screen area is the transparency, and I have a white bg on the sides of the screen image (to hide the slides) and then I did an overflow: hidden on that laptop png. I know there's got to be a better, more flexible way of doing this. Any suggestions? I would like to setup a global tween (".reveal-up") that I can apply to be flexible to many elements on the page (sort of how like green sock does it here). I have it setup on the header and text in the section with the boxes that rotate and "fly-in". It plays, but it doesn't play when in view, rather it plays at the top of the page. How can I approach this to be more flexible so it plays when in view and also be able to apply it to other elements? Tweening inside my scroll trigger timeline. Specifically I am talking about the text "Lorem Ipsum" that is layerd above the laptop. I know how to make it part of the scroll, but is there a way to trigger it on scroll, but not to play with the scroll? If that makes sense. How would one go about triggering it on scroll, but to play through regardless of the users inputs on the scroll and additionally to reset? I am not sure if this is a thing, but when the browser resizes, there's some funkiness that happens to the timelines. Is there a way that I can make it more flexible on browser resize so the funkiness doesn't happen? Thank you for any help. Here's a couple images to assist in my questions:
  9. Hello guys, Just started my first gsap project using react js. There is a loader which is visible at the initial load and I pass a flag prop to the main component once the loader disappears. Once this flag is received by the main component, I play the timeline using the play method. In the timeline I'm fading in multiple elements present in the section. I'm facing a problem where this timeline is a part of the ScrollTrigger animation which happens on every section scroll. So for the first screen, as soon as the loader disappears the animation is already complete as the ScrollTrigger considers it in the viewport. //Main component this.timeline = gsap.timeline().pause(); //sections, sectionRight, descriptions are refs of sections and elements which fade in. sections.forEach((section, index) => { const tl = gsap.timeline({ paused: true }); tl.to(sectionRight, { autoAlpha: 1, duration: 0.5 }).to(descriptions, { autoAlpha: 1, duration: 0.5, y: 0 }, 1); ScrollTrigger.create({ trigger: section, animation: tl, start: "top +=70", end: "bottom top", scrub: 0.5 }); }); //this.timeline is same as above tl which is played when the loader flag is received. But the animation is already played due to being in the viewport. Also, I want the timeline (tl) to play on each section scroll when in viewport but doesn't work properly. Not able to figure out where is it going wrong. Help very much appreciated. Thanks in advance.
  10. phernand42

    Hiding Layers

    Hi Everyone! Trying to figure out how I go about hiding layers in my svg using scrolltrigger. The effect I'm trying to go for is when a user scrolls down on page a new layer is displayed at certain points/triggers (while also keeping original or first layer displayed always). However as you can see from my pen example there are certain layers I'd to hide when scroll gets to a certain trigger, right now they overlap which I kind of expected. I've been reading up on stagger but I'm not sure how I would go about implementing with scrolltrigger. Thanks in advance!
  11. I'm trying to trigger different timelines at different breakpoints using the window.matchmedia(); method. I've attempted to put together a potential example here: const box = document.querySelector(".box"); const change = document.querySelector(".change"); const mqs = [ window.matchMedia("(min-width: 600px)"), window.matchMedia("(min-width: 768px)"), window.matchMedia("(min-width: 1024px)") ]; const tl = gsap.timeline({ paused: true; }); if (mqs[0].matches) { tl.to(box, { backgroundColor: "green" }); } else if (mqs[1].matches) { tl.to(box, { backgroundColor: "pink" }); } else { tl.to(box, { backgroundColor: "black" }); } function playTl() { tl.play(); } change.addEventListener("click", playTl); My idea is to have the change button trigger the animations. Is it a little more complex that this approach? Having dug around in the forums it seems media queries plus gsap tends to throw up a number of complex solutions, I was hoping for something a little more simpler. Here's a Codepen also:
  12. Hey everyone, I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it. The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons. All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side. What would be the best way to tackle this? I've had two thoughts on how to approach it. Single Timeline Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above. Multiple Timelines Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks. Which of these is the better pattern to take, or is it worth doing it completely differently? Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above. Any help would be appreciated! Thanks Sam
  13. Hello, First of all, sorry for just copying and pasting the whole project, but I didn't have enough time to replicate the issue in a minimalistic way. Hope it's useful to solve the problem I'm facing. I'm currently working on my personal site which its homepage consists of a slider. When the slide changes, a div covering the whole viewport with a background image should also change accordingly. It is done using gsap.timeline() and as you can notice, there's a really noticeable amount of lag when the animation happens. Without the background change, everything is smooth. Tested on a 2018 15inch Macbook Pro running macOS Catalina 10.15.6 on Google Chrome v84.0.4147.89 (laggy), Firefox v79.0 (really really laggy) and Safari v13.1.2 (somehow smooth). Thank you in advance, Arnau. ps: I was just testing and I know the background image is incredibly stretched, already tried with a properly sized one and same results. ps2: As of now, only the next page button works ("següent").
  14. Hello, I've using in past ScrollMagic with combinations before I discover ScrollTrigger, main reason was that I could make it work on mobile and table (iOS tested only) and since I moved from ScrollMagic to the awesome ScrollTrigger from gsap, I moved just two timelines both works on mobile (iPhone) but still without any changes on iPad. Is there any special thing I have to do to make it work on iPad? I'm using Webpack with GSAP 3.4.0. I don't see anything special why it shouldn't work. What could cause the problem? import {gsap, TweenMax, TimelineMax} from 'gsap'; import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; import {TextPlugin} from 'gsap/TextPlugin'; import {CSSRulePlugin} from 'gsap/CSSRulePlugin'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(TextPlugin, CSSRulePlugin, ScrollTrigger); $(function() { if (document.querySelector('.IntroAnimation')) { let introTl = gsap.timeline({ scrollTrigger: { trigger: '.IntroAnimation', start: "40px center", end: "bottom center", scrub: true, toggleActions: "restart pause reverse pause", markers: true } }); introTl.to('.IntroPlatform-base', {opacity: 0, scale: 0.8}); introTl.to('.IntroPlatform', {rotateX: 0, className: 'IntroPlatform hasShadowRow'}); introTl.to('.IntroPlatform-slide.isHidden', { display: 'block', opacity: 1, onReverseComplete: hideSlides, onComplete: allowSwipeIntro, }, '<'); introTl.to('.IntroPlatform.hasShadowRow', {opacity: 1}, '-=1'); introTl.to('.IntroPreview-play', {opacity: 1}); function hideSlides() { introSlider.slideTo(2); introSlider.allowSlideNext = false; introSlider.allowSlidePrev = false; } function allowSwipeIntro() { introSlider.allowSlideNext = true; introSlider.allowSlidePrev = true; } } });
  15. Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.
  16. Hi Everyone Trying to do some simple animations of a DNA SVG graphic using scrolltrigger and morph svg. As you can see in codepen example I got it to work somewhat but the morph looks a little weird when I scroll down to second section (haven't yet added in other parts of graphic). Wondering if this is the right approach or if there is a better way to do this. Ideally when a user scrolls down small pieces of the graphic will appear (or ease in when scrolling).
  17. Hi! I try to change animation with (window.matchMedia()).matches How can i get tween from timeline and replace (or edit) it? I read about .remove() method, but how can i add on removed place other tween and how can i add label to tween. for example: tl .addLabel('start') .to('.box-1', {x:100}, "start") // <--- how to change this or how to .remove() this and place other tween on this place .to('.box-2', {x:100}, "start")
  18. Had a trawl through the site and codepen but couldn't find an answer. I have timelines that require different scrolltrigger values according to media queries, is it correct to place paused timelines outside the ScrollTrigger.matchMedia() and the scrolltrigger/s inside the function? Or is it best practice to duplicate timelines in each media query? Or some other setup? Thanks
  19. Hello! I have a question, below is an example of the scroll "roulette" I have two questions: 1. Is it possible to do infinite scrolling, for example, it stopped at 100 (------->), the next number is 50 (<-------), and it should continue to scroll right (------>) and stop at 50, not left (<-------) * -------> - this direction: D 2. Is it possible at each start to first do several iterations from start to finish (as when scrolling a wheel) and only after that stop at the desired number? At the moment, if we stand at 10 and select 11, the cursor will move slightly, but it is necessary that he first spins like crazy and only then stops This library is amazing! 🔥 Thanks!
  20. Hi everyone. I have a trouble with master timeline. I can't figure out why all animations in master timeline start when content loaded. I want two animations of the computer to switch each 5~7 seconds . It works fine after the delay finishes. There are Mater timeline on the bottom of codes and functions are top of it. Could you give me some advises to fix this problem? Thank you.
  21. I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated. I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other. I'd like the text container to not overlap and reveal the lines of text as they are visible on the viewport. Any idea what I could be doing wrong? Any help is much appreciated, Thank you!
  22. Hi, I have this timeline playing a simulation of reflection on the water. I wanted to duplicate the timeline, all over the view box. The same SVG object, the same animation but on different locations and playing all at the same time. It is that possible ? I have a test on codepen. Thanks, Sergio
  23. 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.
  24. I want to create something like function with parrameters to generate template for timeline Example: let tl = gsap.timeline({paused: true, defaults: {duration: 0.2}}) /** opt format: opt = { prop: "", // x, y from: "", // value "+=10".. to: ""// value "0" } */ function tlgenerator(element, opt){ let tl = gsap.timeline(); tl.fromTo(element, {opt.prop: opt.from, autoAlpha: 0}, {opt.prop: opt.to, autoAlpha: 1}) return tl } tl.addLabel("start") .add(tlgenerator(element1, {prop: "y", from: "-=10", to: "0"}), "start") .add(tlgenerator(element2, {prop: "x", from: "+=10", to: "0"}), "start") .... It is not working example I'm not sure that this question need codepan demo?
  25. Hi, do you have any tips how make a dragger/timeline or progress bar fulfill by itself as the mouse is being moved? Additionally, how to read its value in real time? I want to update mood.progress() value adequately. In short words - the goal is for pet's mood to get better as you move your mouse. Right now you can do it by dragging a dot on a slider. I'm using GSAP since yesterday. I've been fighting all day with it and cannot think of any proper solution. Thanks! [EDIT] Solved
×