Jump to content
GreenSock

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

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. 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
  2. I want to change color of my background and text again and again parsing my array of colors. I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, let itemColor = 0; var tl = gsap.timeline(); tl.to("#bg", { backgroundColor: colors[itemColor].dark, duration: 1, delay: 3 }).to("#h1go", { color: colors[itemColor].light, duration: 1, delay: 0 }); Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js Thanks in advance
  3. Just moved to GSAP 3.2 from TweenMax 2.latest and noticed this warning. Does not happen with TweenMax.set equivalent. For code gsap.set("#nb", {top: "200px"}); //... //... gsap.set("#nb", {clearprops: "top", bottom: "58px"}); I get a warning in 3.2.6, but things continue to work well. Invalid property clearprops set to top Missing plugin? gsap.registerPlugin() Here is the full log demo.localhost-1588964285633.log PS: #nb { position: absolute; padding-top: 8px; white-space: normal; /* needed for edge because edge doesn't understand break-spaces */ white-space: break-spaces; font-size: 16px; width: 100%; left: 0%; line-height: 1.3; }
  4. Hi guys, this is how i normally created my loops in my banners before gsap3: // ... tl.addCallback(function(){ if(loopCount < 3){ loopCount++; // fade out elements }else{ tl.pause(); } }); Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline? This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well. var loopCount = 0; var tl = new TimelineMax({paused:true, repeat:-1}); tl.timeScale(1.2); //fr1 tl.from('#logo', 1, {scale:1.2, opacity: 0 }); tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); tl.to('.cls-1', 1.2, { 'stroke-width': 102 }); //fr2 tl.from('#bg-blue', 3, {opacity: 0}, 'kaas') tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas'); tl.from('#shop', 0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas'); tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas'); tl.from('#stuk2r', 1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk2l', 1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3r', 1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3l', 1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2'); tl.to({}, 1, {}); tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3}); tl.to({}, 2, {}); // loop tl.call(function(){ if(loopCount <= 5){ loopCount++; tl.set('.cls-1', { 'stroke-width': 14 }); tl.set('.line, .line2, #logo', { opacity: 0 }); tl.to('#frame2', 0.5, {opacity: 0}); }else{ tl.pause(); } }); tl.to({}, 0.1, {}); What am I doing wrong? Thanks!
  5. I am trying to add a defaults values for my fromTo(), I tried putting defaults: {} inside gsap.timeline({}) as below const tl_shapes = gsap.timeline( { defaults: { opacity: 0 } }, { defaults: { opacity: 1 } } ); function step_shapes_animation () { return tl_shapes .fromTo( ".step-2 .shapes img:first-child", { x: -200 }, { x: 0, duration: duration } ) .fromTo( ".step-2 .shapes img:last-child", { y: -200 }, { y: 0, duration: duration }, "-=0.4" ); } I am not sure if this is the right way to do it but second element doesn't seem to work and it starts with initial opacity: 1 and I guess it is because fromTo() has 2 objects and I can't put 2 objects for defaults. I am wondering if there is a right way to do it.
  6. Hello When my website launches im creating a timeline and then saving it in an object so later I can control it's playback. Thing is, when I call that timeline again, I would like to pass a parameter that will change the background color of my animation dinamically. I know that the timeline is just an object, and going to _first.vars.background I could change the color, but this is cumbersome. Is there a more direct approach so when I try to play or reverse my timeline I could pass parameters directly and change the burger background color? Thanks in advance :)
  7. 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
  8. Hi, I meet a simple problem with a tween : when I execute a first time my tween and then resize my window, the tween is happens badly, but if I refresh my page everything works fine, I've searched on forums but I don't find expected results 😕 In a first time, I've thinked the problem was linked to my CSS properties but when GSAP tweening it uses pixels values, and that's my only clue to resolve the problem. Here, an attached minimal repository : https://github.com/pierredarrieutort/Jape/tree/minimal_repo_for_menu
  9. Hello, guys 😃 I have some div, positioned as 'left: 10px; top: 10px'. And then, i'm trying move it to 'left: 50%; top: 50%' and it works, but at the beginning of animation, div jumps. How can i fix this?
  10. I'm trying to convert Craig Roblewsky's CodePen Horizontal full-screen slider w/4 controls to GSAP 3 but I'm getting a console log error that I don't understand. Can anyone take a look and see if it's a simple fix? I'd like to use this slider with GSAP3. Thanks!
  11. I've create a function which scrolls to the next anchor detecting the scroll direction (See below) const CONTAINER_STRING = '#main-container>main', CONTAINER = document.querySelector( CONTAINER_STRING ) let currentChild = 0 gsap.registerPlugin( ScrollToPlugin ) CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => { if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 ) currentChild++ if ( currentChild > 0 && deltaY < 0 ) --currentChild gsap.to( CONTAINER, .5, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } ) }, { passive: true } ) My problem is i can't detect if gsap is currently tweening in my page. I've tried some tricks like extract the tween into a variable, but nothing works... 🤔 So how can i detect an interpolation in my page or detect if this specific tween is active ?
  12. Juraj

    gsap3 cycle method?

    Hey guys I may be blind, but is cycle method supported in the gsap3 release? Can't seem to make it work the old way. Thank you!
  13. Hi! Help me please!)) Now I have loop animation to the right. If I click "Left(reverse)" animation go to the left, but animation stops. What I need do that animation works loop and when i click" Right(play)" and when I click "Left(reverse)"
  14. dada78

    jquery gsap Plugin

    Hi guys, I am working on this app that uses jquery for functionality, however I have never really used it, especially not in conjunction with GSAP. I did get the animation to work thanks to your doc, however I am not clear as to how I would do a GSAP fromTo method using the jQuery syntax. Basically I am trying to use GSAP to animate some jquery modal transitions. To just test that the animation is working at all I used the below .animate method which is animating fine, but what I really want to do is a fromTo animation, where the modal is scaled up from width/height:0 to 1200px x 705px. In my showModal function I have this: var showModal = function () { setTimeout(function(){ //alert("Boom!"); }, 2000); $(options.selector.outer).css('display', 'flex'); $(options.selector.inner).animate({width:"1200px", height:"705px", display:'flex'}, {duration:1000, complete:onShowComplete}); }; Thank you!
  15. I am trying to have the arrow group move along the X while fading in and have the inner svg paths stagger fade in, but it seems the group move and fade won't work with the stagger of paths.
  16. Hello, I hope you can help me with this. I am trying to create a custom hook for creating an image parallax using intersectionObserver API. Seems work partially but when I scroll I get this error: backend.js:6 Invalid property y set to 47.666666666666664 Missing plugin? gsap.registerPlugin() My goal: using Y or backgroundPosition from/to everytime the element is visible. import React, { useEffect } from 'react'; import { gsap } from 'gsap/all'; function useImageParallax(imagesParentSelector) { useEffect(() => { const appWrapper = document.querySelector('.app--layout'); const elements = document.querySelectorAll(imagesParentSelector); const scrollHandler = () => { let options = { root: null, }; // parallax effect let observer = new IntersectionObserver(function(entries) { entries.forEach((entry) => { const offset = appWrapper.scrollTop / 3; gsap.to(entry, { y: offset }); }); }, options); for (let elm of elements) { observer.observe(elm); } }; appWrapper.addEventListener('scroll', scrollHandler, { capture: false, passive: true }); return () => { appWrapper.removeEventListener('scroll', scrollHandler, { capture: false, passive: true }); }; }, [gsap]); } export default useImageParallax;
  17. Hi community , this is my first project with React and GSAP. I really love the work we have created, but we have a big issue: In the project, we are using server side render with reactjs.NET. When we try to render a component with the gsap library we got this error: setTimeout is not supported in server-rendered Javascript Here is an image with the error too. please, help me with some ideas, I made great things with gsap and I dont want to dont finally use the library and I have to finish the project next week... thank you very much
  18. Hi everyone. Firstly, I'd like to say thanks to an amazing forum, I've learnt so much here over the last few weeks. The effort you lot put into this is unreal. Unfortunately, I can't seem to find a solution to the issues I'm having, hence this post. I'm trying to stagger animate a list in and out that changes length and properties. I'm using gsap3 with react hooks. I'm sure this is common and I'm just approaching it wrong so I would really appreciate someone taking a look at the link below: https://stackblitz.com/edit/gsap-react-listobject-stagger Thanks so much!
  19. Hello I have to do a airplane that fly vertically left and right whenever the user scrolled, I already did it with Scroll magic and I can't figure how to do it right, i know the problem is on the path it must take full height of my container but i don't know how to do it do you have any idea guys I've been stacked for 2 days Thank you
  20. Hello again! I've managed to make some items orbit infinitely 🥳 There are a few things I'm slightly struggling with: 1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..? 2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 🤢 so thought this was some kind of require.js error, but it also happens in the codepen demo. In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening? 3: Also, in this simplified demo, the items seem to not follow the path exactly..? (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? The 'items' are too small to need an offset? Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. Look forward to your response, thanks!! P.s. Loving version 3 !
  21. gsap.to(target, {duration: 0.3, autoAlpha: 0}); The expected behavior is that visibility will be set to hidden, but as you can see in this pen (see console) when you click the target (red div) the visibility is set to inherit. And because the target is still visible it's still clickable, so when it's clicked again, then the visibility is set to hidden. I suspect this is a bug. With GSAP 2 the visibility is correctly set to hidden.
  22. IvanChen

    GSAP3+Vue-cli4

    I install gsap-bonus.tgz with Vue-cli 4 and follow the tutorial. Then setting up as bellow. //main.js import gsap from "gsap"; //Home.vue let obj = document.getElementById("test"); gsap.from(obj,1,{opacity:0.1,y:30}) I used gsap in my component but got "ReferenceError: gsap is not defined".
  23. Andy1708

    Timing animation

    Hello again starting the mainFishTL on my project (see on the codepen). the mouthScaleTween (a scale of the mouth with a yoyo) , the moveFishTween ( a slight up and down movement) and the switchFishTween run after each other and not at the same time… what am i doing wrong ? Thanks for your answer Yves
  24. I'm converting a project using gsap 2 to gsap 3. BezierPlugin.bezierThrough() is used, but I don't see a compatible method in the MotionPathPlugin. What would I use to replace that function?
  25. What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait. PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above. mounted() { this.timeline = gsap.timeline() }, methods() { throwBait(e) { let vue = this; this.animation = this.timeline .fromTo( [this.lure, this.bait], 1.3, { css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY - 200, scaleY: 0, scaleX: 0, visibility: "hidden" } }, { ease: "elastic.inOut(1, 0.75)", css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scaleY: 1, scaleX: 1, visibility: "visible" } }, 0 ) .fromTo( this.wave, 2, { y: "-5", width: "0px", height: "0px", border: "1px solid white", opacity: 1 }, { y: "-=5", ease: "Linear.easeNone", width: "50px", height: "10px", border: ".1px solid white", visibility: "visible", repeat: 2, opacity: 0 }, 1 ) .to( this.lure, 1, { y: "-=5px", ease: "Linear.easeNone", yoyo: true, repeat: 6 }, 0 ) .to( this.lure, 1, { y: 20, ease: "power4.out" }, 6 ) .to( this.lure, 0.5, { y: -100, ease: "power4.in", opacity: 0, scale: 0 }, 6.5 ) .then(x => vue.reset()); }, reset() { this.timeline = gsap.timeline(); this.timeline.time(0); }, }
×