Jump to content
GreenSock

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

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. Hello Everyone I Want a Jelly Blob which Follows the Mouse and Squuezes and Rotates To Match the Mouse Move Direction The Probelm is The When The Angle of Rotation Switches from 0 to 180 or -180 or from -180 to Positive, The Jelly Blob Changes Direction Suddenly Giving a Jittery And Bad Animation. You can test this out by just Following the Mouse in a Circular Motion, and The Jelly Blob will keep Switching Direction . If Anyone Can Fix This it Would be very Helpful Thanks In Advance.
  2. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  3. Good day, I want to create a text reveal animation as shown on the codepen as a scrolltrigger. To have the animation starts when the trigger reached the middle of the screen when scrolled. Can someone help me?
  4. Hello, I am having a problem in making motions with Scroll Trigger. I am trying to make an SVG appear when triggered, and disappear after a few scrolls. I tried making two separate timelines for each motion, which did not work at all... ,and I have also tried using .reverse( ) or .fromTo( ) with no avail. Would any of you guys teach me how to make my SVG appear and later on disappear using the scroll trigger? To get the precise image of what motion I am trying to make: I want this appearing and disappearing to be triggered through scrolling. I am sorry, I cannot provide a codepen of my project (as I do not have the pro to upload the svg assets), instead I will clip a video of what I my current circumstance. I am trying to make the forest kinda thing sink out of the view after another stroke of scrolls. Please help me out here. Sincerely,
  5. Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?
  6. Hi Guys, Im a Developer from Germany so please excuse my English.. I need to create an Image Sequence and it should behave like this: You would scroll down until you have the Sequence in the Center of the Viewport, then the Viewport would be pinned (for example) and the Sequence starts. As soon as the Sequence is complete you could scroll further on the page. Is that possible with GSAP? I tried Scroll Magic and failed but i don´t have any experience with Green Sock.. I attached a Picture of the concept.. the Picture you see in there is actually a GIF implemented as an image Sequence. So as soon as the whole brown Module is in view, Scrolling of the ViewPort would be disabled until the Image Sequence is finished. The Live URL (not finished) is here. Maybe you guys have an Idea.. I would be really thankful! Greetings from Germany, Finn
  7. Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
  8. I am currently renewing my portfolio. And notice that I don't have enough skills for what I want to implement. It's only about the home page of my portfolio, I would continue the rest myself. I need help for the following. the following should be done Fullscreen slider (with my works) with text animation, image / video liquid animation on hover Page transition for the selected work in the slider (without content only the transition) simple page transition for other page (like about,..) Preloader animation Hover animation of the navigation points Draggable/Scrollable endless grid (with image and on hover 'optional' gif/video) - on scrolling/dragging a little liquid effect ) I have a page here in which direction it should go.Here is the link for example (slider show, page transition, hover animation and at the bottom left when clicking on the layer icon the endless grid ) https://heycusp.com I would provide the designs as well the necessary animation. I hope someone can support me there (and can also implement this as in the example) and make my work a little easier. For info only I'm not a company or agency, i'm a ux / ui designer. Please send a message or answer to this topic (with the days you need for it and what you want for it). Cheers Mr.A
  9. 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
  10. 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!
  11. 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
  12. 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
  13. 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?
  14. 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.
  15. 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?
  16. 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!
  17. 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 :)
  18. 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
  19. 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!
  20. 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?
  21. 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 });
  22. hacu95

    Quick Question

    Im trying to animate the Fill/Stroke of my SVG but its not animating it just snaps in no matter what
  23. 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 ?
  24. 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/
  25. 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
×