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, 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 trigg
  2. 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 defa
  3. 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
  4. 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 m
  5. 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
  6. 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%',
  7. 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 w
  8. 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
  9. 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
  10. 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?
  11. 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
  12. 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 nig
  13. 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?
  14. 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
  15. 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 :)
  16. 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.
  17. 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.mi
  18. 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?
  19. 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 });
  20. hacu95

    Quick Question

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