Jump to content

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

Search the Community

Showing results for tags 'gsap 3'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 10 results

  1. Hello network ! gsap version: 3 I'm experiencing some issues with gsap-bonus.tgz with yarn. The packages im trying to install are from monorepo, or basically they present a custom framework. Since i devided them into private packages in npmjs, when i try to run yarn command to install these packages, the package which includes gsap-bonus.tgz throws an error: error "packages/app/gsap-bonus.tgz": Tarball is not in network and can not be located in cache (["C:\\Users\\Kristiyan\\Documents\\GAMES\\leprechaun-respins\\packages\\app\\gsap-bonus.tgz","C:\\Users\\Kristiyan\\AppData\\Local\\Yarn\\Cache\\v6\\.tmp\\666fb417fd4c77f48a6f166bd0b8e500\\.yarn-tarball.tgz"]) The gsap-bonus.tgz file started making problems since we published the private packages in npmjs. This is how the package.json file dependencies looks like inside the game im trying to develop (gsap-bonus.tgz is inside @silverbackgmng/app) : "dependencies": { "@silverbackgmng/app": "^1.0.70", "@silverbackgmng/config": "^1.0.40", "@silverbackgmng/contracts": "^1.0.50", "@silverbackgmng/engine": "^1.0.50", "@silverbackgmng/localization": "^1.0.30", "@silverbackgmng/manifest": "^1.0.1", "csvjson-csv2json": "^5.0.60" } and this is the package.json file dependencies inside @silverbackgmng/app private package: "dependencies": { "@silverbackgmng/engine": "^1.0.22", "@silverbackgmng/slot": "^1.0.11", "@silverbackgmng/ui": "^1.0.26", "@types/howler": "2.2.1", "@types/webpack-env": "1.16.0", "eventemitter3": "4.0.7", "gsap": "file:gsap-bonus.tgz", "howler": "2.2.1", "lerna": "^4.0.0", "pixi-viewport": "4.18.1", "pixi.js-legacy": "5.3.3" } Do you have any suggestions why that issue occurs?
  2. Congratulations on the release of GSAP 3! The work you lot do both with your framework and with the support for it is just incredible, and I personally can't express how thankful I am to have this resource! https://codesandbox.io/s/friendly-ellis-yi33q?fontsize=14 So what I'm trying to do is to run an animation across a few components. In this example specifically, I'm trying to have a button that animates and opens a modal, which then animates the content of the modal. I got it all to open relatively well, but what I'm not able to figure out is how best to go about reversing the animation, and more specifically the `ModalContent.js` animation. What I want to have happen is for it to reverse the content, then transition the modal itself. I'm certain that the issues all lie in the way in which I set this up, so any suggestions on structuring this better (while still preserving the capabilities of animating across multiple components), I'm all ears. Also, am I correct in using refs for targeting the elements? Is there any type of drawback to having a fair amount of refs for animating? Thanks!
  3. So i found code https://codepen.io/bcarvalho/pen/gWPvJB (credit to Bruno Carvalho) for slider parallax, but it's create with TweenMax (GSAP 1). I want to remake the code with GSAP 3, but the result is different, kinda buggy. Any solution what's wrong? Thank you
  4. Hello everyone. I have example by parallax effect on scrolling. https://pochta.tech/ Horizontal scroll parallax. I try repeating this effect used gsap ScrollTrigger. My example with problem: https://codepen.io/dc65k/pen/oNzxEpK Tell me please, what the wrong in my code?
  5. Hi! I'm trying to pin an element with all content above and under during some animation, like changing background color, but rather I didn't understand it correctly or something wrong with the behavior. Could you, please, help with the problem :)
  6. Hi, I am working on a project using the DrawSVGPlugin, and using native JS that's compiled with gulp and webpack. I'm importing gsap and the plugin as such : import gsap, { TimelineLite} from 'gsap'; import * as drawSVG from '../gsap-extras/DrawSVGPlugin.js'; and the registering the plugin in the constructor of my component's class using : gsap.registerPlugin(drawSVG); Then, I simply want to test the plugin doing something like : new TimelineLite().set([this.anchorCircles, this.anchorFillCircles], { drawSVG: 0 }); This is actually working as long my gulp server is watching the changes and displaying the development JS, but after running a build, I'm able to log the drawSVG imported, but the TimeLine().set wont have any effect on my elements. I can't provide my gulp config if this is needed, but may be there's something simpler that I am missing here.. Thank you EDIT: // Finally found that the way the webpack was configured prevented the minified plugin to work. I had to change the webpack babili plugin to webpack minify plugin !
  7. Hello Everyone, I am trying to animate the text using the new scrollTrigger Plugin, there is a glitch when the start point reaches the scroller-start, why is this happening? I am unable to figure it out. Please help me to fix this glitch issue. Thanks.
  8. I've recently found a very nice codepen containing almost the exact same animation I wanted done in GSAP, and I've been trying to convert it to GSAP 3 to use it in a web app using pretty much just react hooks all over. It uses timeScale tweening to simulate acceleration and deceleration of a rotating svg, with a play/pause button. However, I can't seem to get the acceleration/deceleration effect to work on Firefox/Chrome, and it won't pause, either. The codepen I linked is the effect I'm trying to achieve, and I've linked a minimal reproducible example below: https://codesandbox.io/s/blissful-hill-boo2n There is just one condition that I'd like to include for my app besides using hooks and gsap 3, and that is that I need to fade the rotation in and out based on the state of the parent element, and as far as I can see that's working alright (as evidenced by the isActive! isNotActive! console logs). That state is currently set by the playButton element, via the setActiveCallback function. I'm not sure this is what's breaking everything, since the animation itself doesn't look like it's working properly on it's own with either react hooks or gsap 3. TL;DR: I can't get codesandbox the animation to pause, and the intended acceleration/deceleration effect is borked. Any help will be very much appreciated!
  9. Greetings! My apologies in advance if the answer to this question exists somewhere. I have had a look but I've not been able to spot anything conclusive. I've used TweenMax exclusively for years in my HTML5 banners, and sometimes my banners have quite a lot of animation going on throughout. However there are typically time limits for animation (after which no animation can be going on), so when it comes to stopping every animation, I used to rely on the extremely useful TweenMax.killAll(); to end everything at the same time; particularly useful when there are dozens of animations (on smaller things) running at the same time. Though GSAP 3 was released a while back, I've only just begun to adopt it into my banner development process. However, it seems (unless I am mistaken - and please do correct me if I'm wrong) that killAll() no longer exists as a function. I'm sure there's a very good reason for this, and I know I can still kill the animations of everything individually, but it seems like unnecessary extra custom code I now need to write when there was previously a function to do this automatically for every single active tween, in one single stroke. Am I missing something? Is there a plugin or something else I have been embarrassingly oblivious to? Many thanks!
  10. Hi All, & Thanks in advance for any help. I have a selection of arrow heads I want to move along separate paths... I've followed some existing Topics here to get me most of the way, but am struggling with inconsistency between the different shapes. Some of the arrow heads are drawing in no problem (all the straight ones, that makes sense), but others do while similar ones don't - see #i-line_5. That works well, whereas #i-line_3 doesn't. It seems to be partly to do with the arrow head origin-position, and partly autorotate, but cannot get a fix whilst I change these. I also suspected the origin of each arrow-head may need changing (eg, which point comes first in the Path parameter), but have struggled to update them / make any change to the outcome. Thanks Jake.