Search the Community
Showing results for tags 'gsap 3'.
Found 12 results
-
HERE is the CODE: https://stackblitz.com/edit/gsap-react-basic-f48716-ontwbj?file=src/App.js I want to create the carousel. Boxes move from left to right and when the left: 100% it should start from the left: -40% Here is my code: CSS: .moving_box{ position: absolute; left: -50%; } React: useLayoutEffect(() => { const ctx = gsap.context((self) => { var last_box_x_value = windowSize.innerWidth <= 424 ? "281%" : "200%"; gsap.set(".moving_box", { y: (i) => i == 2 ? last_box_x_value : "60px", left: (i) => i == 0 ? "0" : i == 1 ? "60%" : i == 2 ? "40%" : "" }); HowToSectionT1.current = gsap.timeline({ defaults: { repeat: -1, ease: "Linear.easeNone", align: "start" } }) .to(".box_1, .box_2, .box_3", { left: "+=100%", duration: 10, modifiers: { left: (x) => { // return x > 100 ? "-40%" : x + "%"; <- Problem is here return x; } } } ) }, HowToSectionRefContainer); // <- Scope! return () => ctx.revert(); // <- Cleanup! }, []); The Problem: The problem is when I try the this code the all the boxes move to right but not follow the modifier (when left is 100% go back to -40%). thanks
-
Hi, I am trying to build an event loop visualization as Jack Archibald did in this wonderful talk. I've created three SVG (2 ellipses, 1 circle) for this visualization. My goal is to be able to change the path in the middle of the animation and it should continue to follow the next path at the first opportunity(probably when it reaches the center-top position of the center circle or the center-bottom position of the center circle. My current implementation is adding an "onRepeat" callback to the currently playing animation and killing it when it starts to repeat. Then I'm starting to the next animation. But the problem with that is the square doesn't transition smoothly to the next path because my SVG's start positions are not the same. Even though I set their start position as close as possible to each other, I *should* be able to decide to follow another path in any phase of the currently running animation. So, I need some suggestions or clarifying that if this is possible with my way or should I try another approach. Any idea is appreciated. I hope my explanation makes sense, if you could watch Jake's talk for a few seconds, you can understand better my goal I also added a small video about how I use three different svg and merge them around center circle. svgs.mov
-
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?
-
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!
-
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
-
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? -
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 :)
-
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 !
-
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.
-
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!
-
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!
-
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.
