Jump to content
Search Community

Search the Community

Showing results for tags 'help'.

  • 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 have a React component that I'm trying to toggle the width of when a button is clicked. When the button is clicked again, it goes back to the original width. The problem is the original width could be anything, depending on the viewport size as it's responsive. On small devices it's 75%, large it's 25% with a few others in the middle. There's also another animation that animates the opacity and position of the element I'm targeting here. Here's what I have so far; useEffect(() => { const tween = gsap.to(slashRef.current, { width: '100%', ease: 'power3', paused: true, }); if (menuOpen) { tween.play(); } else { tween.reverse(); } }, [menuOpen]); I've tried starting it as paused, and when the `menuOpen` is true it animates the width fine. When it's `false` it's not reversing it back to its original position as I would expect — clearly I'm missing something. I've tried a bunch of different approaches using state and ref to set the original width and trying to access that but I've had no joy so far. I'm sure it's something simple I'm missing. Thanks for any help, Chrish
  2. So, in the Codepen we have a fairly simple animation. On click of the button, we animate the <header> and <nav> elements in, and click it again, we animate them out. It's a toggle button. However, on mobile, we don't want to run the animation but instead want things to appear instantly. We have achieved this using calls to progress(0) or progress(1), however, we've noticed that if you first toggle the animation on desktop, and then go to mobile, and toggle it again, that without the calls to tl.reversed(false) or tl.reversed(true), the animation still tries to animate and doesn't work correctly. Does anybody have any ideas why adding those lines would make it work as I would expect it? What am I missing? To reproduce: On desktop, or anything matching the media query in the Pen (1000px), click the 'Play animation' button, then click it again to hide the animation. Reduce your screen size down to trigger the mobile code, and again, toggle the 'Play animation' button. Note: the code in the Codepen works, you'll need to remove calls to tl.reversed() on lines 18 and 21 to see the issue. Any help would be much appreciated!
  3. Hello all-- I'm currently converting an old Codepen that uses TweenMax 1.2 to the new GSAP 3.1 lib. I've gone through the docs and converted everything per the spec, but my animations are failing to actually fire, and with no warnings in the console, I'm currently lost. My suspicion is that it boils down to these two lines being improperly formatted, but I'm not sure what's wrong. I've added firing and killing functions to both pens for testing, spawnTrees() and killTrees(). Ln 80/81: .add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25') .add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25'); For reference, below is the Codepen that I'm converting. I'm eager to see what's going on here so I can continue adding onto this animation sequence ? https://codepen.io/paulkmiller/pen/VwLKLpo
  4. 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
  5. hello! i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync. SMIL: https://codepen.io/urx/pen/XWJNgLB GSAP: https://codepen.io/urx/pen/QWwGMbq help?
  6. Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
  7. Hello guys, Greensock and his plugins is very new to me and I have trouble understanding it, I hope the answers on this post will help me out! I need help to animate a analog clock, the animations have to be done with 'Greensock'. Basically, I already have the analog clock coded. This link leads to my repo on github: https://github.com/noahkroez/Challenge-2. I was searching on the internet I just need two animations added with the Greensock plug-in: I want the background color changing gradually with the current time, so as example: from dark at night to bright at day. I want the clock to slides in from the left when the page loads.
  8. As you can see I have 3 elements with the same class. At the start of animation 2 of them starting instantaneously and only third one after a desired delay. How to fix that?
  9. Hi everyone, I'm having some issues with my project for school and I'm hoping someone can help...my animation essentially has four elements: a globe, a dashed line surrounding the globe, a plane that is placed on the dashed line and three clouds. I placed the three clouds in a TweenMax that is separate from the master timeline and they are doing what they need to be doing. The plane is supposed to rotate on the dashed line counter clockwise and that's working fine as well. The globe is supposed to be still and the dashed line is supposed to be rotating clockwise while the plane rotates counter clockwise...this is the part that doesn't seem to be working correctly. Every so often, the animation will completely change in front of me without me even refreshing it– it will either just have the plane, the dashed line and the globe visible (not the clouds) and they'll all be doing what they need to be doing OR it will have everything visible but the dashed line won't rotate. Does anyone know what could be the issue? I appreciate your help!
  10. Hi all, I would like to know how to get this result, or do I have to look in the documentation to make animations like this developer ? http://eric-huguenin.com/ tanks you verry much :)
  11. Hello friends; First of all my English is bad, so I apologize. I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link: http://codepen.io/bdang/pen/pJyYEO My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by Tweenmax.to (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active? Thank you.
  12. Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!
  13. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
  14. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  15. hacu95

    Quick Question

    Im trying to animate the Fill/Stroke of my SVG but its not animating it just snaps in no matter what
  16. Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?
  17. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
  18. I created the following animation using css/javascript, but was told that it would be easier to achieve what I need done with Greensock. http://codepen.io/gtdesign/pen/JKGmeO I would like help in seeing if there is a way to hover over one of the circles, say for instance “Gutters” that the rotation stops and the “Gutters” circle gets larger and changes color. Can all of this be done using GSAP? Thanks for any help, Andy
  19. Hello Everyone! I encountered a problem for which I can not find a solution. I would like to make the transition from one slide to another, something very similar to CSS clip. The problem is that I need a diagonal bar to sweep the screen from right to the left, showing the content that lies beneath. Does anyone have any idea on how to achieve that? I have attached a picture that might explain a little bit better what I am trying to do. Any help is very much appreciated!
  20. Hello, i'm new to GSAP please help, i'm trying to do this simple animation It works, but when I step into another window linked with same animation It stop working, doesn't start. (pd my english isn't good enough) <?xml version="1.0" encoding="utf-8"?> <svg class="skt8" width="48" height="48" x="0px" y="0px" xml:space="preserve" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> .kt1{fill:#FFF;scale:0; opacity:0;} .kt2{fill:#FFF} </style> <g> <path id="aa" class="kt1" d="M20,9.5h-3V18h-5v-6.4H8V18H3V9.5H0L10,0L20,9.5z"/> </g> <g> <path id="ab" class="kt1" d="M10.4,8C8.2,7.4,7.5,6.8,7.5,5.8c0-1.1,1-1.9,2.6-1.9c1.7,0,2.4,0.8,2.5,2.2h2.2c-0.1-1.8-1.1-3.4-3.2-3.8V0 H8.6v2.2C6.7,2.6,5.2,3.8,5.2,5.8c0,2.3,1.9,3.5,4.6,4.1c2.5,0.6,2.9,1.5,2.9,2.4c0,0.7-0.5,1.8-2.6,1.8c-2,0-2.8-0.9-2.9-2.2H5 c0.1,2.3,1.7,3.5,3.6,3.8V18h2.9v-2.2c1.9-0.4,3.5-1.5,3.5-3.6C15,9.6,12.6,8.6,10.4,8z"/> </g> <g> <path id="ac" class="kt1" d="M11.9,10.7c1.8-0.7,3-2.5,3-4.5c0-2.7-2.2-4.9-4.9-4.9S5.2,3.5,5.2,6.2c0,2,1.2,3.7,3,4.5 c-3.4,0.5-7.8,2.2-7.8,5v3.9h19.5v-3.9C19.8,12.8,15.3,11.1,11.9,10.7z"/> </g> <script type="text/javascript"> <![CDATA[ new TimelineMax().to('.skt8 path', 1, {scale:0,transformOrigin:"50% 50%"}); new TimelineMax({repeat:-1}) .to('#aa', 1, {scale:1, opacity:1}) .to('#aa', 0.4, {scale:1, opacity:0}) .to('#ab', 1, {scale:1, opacity:1}) .to('#ab', 0.4, {scale:1, opacity:0}) .to('#ac', 1, {scale:1, opacity:1}) ]]> </script> </svg>
  21. Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?
  22. I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below). When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'. I have also tried using window.foo to set the variables which also did not work. Any ideas on how to get this to work? var problemtl = new TimelineLite(); problemtl.to(step1, 1, {alpha:1}) .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5') .call(function(){finalleft = 500; finaltop = 100}) .to(step2, 1, {alpha:1}, '+=0.5') .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');
  23. Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
  24. I just started using these libraries today but I hit a bit of a roadblock. I am aware that my pen is awkwardly mixing css transforms and greensock tweens however even when all css transforms are commented this problem persists. The content on the back of the card flickers when rotating to match its fanning angle during the animation. The center one, which has no rotation, does not flicker at all. However the others do. Also strange is that the front of the card does not experience this at all. Additionally I noticed that onRelease does not seem to move the object back to the original location until after a mouse move event has occured. this means my mouseout animations will not trigger if you drag the card and then do not move the mouse. Any ideas on work arounds to these problems? The red line is just the area where the drag event should be forced to end and the blue line is the hand area. I sorry for the messy scss, I was trying to move over to greensock however now that this is broken Im not sure what to do. http://codepen.io/AdilSoubki/pen/dPwPRP
  25. hey everyone I m really interested in these tools, and oh i m totally new to everything... question, how do I install these into my wordpress site... anyone can help with a setup instruction. i typically wanna use the scroll parallax functions, have a business package no idea where to start. my brain needs an dummy Actionscript i guess.....help thanks for your time
×
×
  • Create New...