Search the Community
Showing results for tags 'gsap3'.
-
Hello I'm going to make a digital book like a flipbook. By looking at the tutorials, I was able to make a typical right-to-left example, but the pages are not as soft as the pages of a real book. https://codesandbox.io/s/flipbook-rtl-k8w8f?file=/src/App.js:845-849
-
draggable Draggable does not trigger OnDrag and Snap in React.
Thomas Devolder posted a topic in GSAP
So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function. I don't know why, I also don't get any errors. let rotationSnap = 90; Draggable.create(vinyl, { type:"rotation", OnDrag: () => console.log('works'), snap: function(endValue) { console.log(endValue); console.log(Math.round(endValue / rotationSnap) * rotationSnap) //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. return Math.round(endValue / rotationSnap) * rotationSnap; } }) } -
Hi! I find on documantation page property startAt What different between .fromTo and startAt? What are the features of using startAt
-
Hello green fellas! What I'm trying to accomplish is I think very simple but I'm still stuck on it. This is what I want when an user scroll : -> while the user is scrolling, the div must appear slowly (with opacity) at the center of the screen -> when opacity is at 1, keep it like that and do nothing for some defined px/vh while keep scrolling -> when those px/vh are ended then change the opacity from 1 to 0 while user keep scrolling -> go to next div/section and do the same So the div must appear on the center of the screen and disapear on the center of the screen. (And I need to do the same with the following div's). Here is a codepen of what I tried. Thanks a lot in advance for your help! -
Hi GSAP champs, Soon, I'm going to start working on a project which is a product landing page full of GSAP animations. So, currently we're planning to go with GatsbyJs & one an only GSAP. The animations required in that landing page: DrawSVG ( is it free?) Pinning ScrollTrigger So, I wanna confirm that does GSAP & GatsbyJs have full support for the GSAP, I mentioned above ? any useful resource or help or guidance would be appreciated. Thanks
-
I have simple animation. It works just once. Is there a simple way solve that problem? Thanks!
-
Everything works fine, but only once. How to solve that?
-
hi guys, i need your help, it's been a couple days that i'm trying to solve this. i have a box wich contains SVGs that are draggable, that box needs its box-sizing to be "content-box", and the draggable SVGs bounds needs to be inside the box (not touching the borders) that's why i created a bounds-box which take 100% width and height of the parent box, and set the draggable bounds to that bounds-box, it works fine , the only problem is when i zoom in or out, the bounds change after dragging the svg around and u can see that the bounds got -1px on every side. thank you.
-
Hi! I need to create a counter, but it must be integer. No need numbers after comma (dot).
-
Hi! I create some demo with image source. I'm trying to make pinned image sequence on GSAP 3. Reference: https://store.google.com/us/product/nest_doorbell_battery?hl=en-US#gq-overview-chap-intro-3 I've found some example but they are implemented on canvas and they user sprite. I dont need to use sprite. Example â„–1: https://codepen.io/osublake/pen/KKzgqKr Example â„–2: https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6 I need other way. I know that's not GSAP product but I want to implement same thing Like ScrollMagic + gsap image sequence https://scrollmagic.io/examples/expert/image_sequence.htmlhttps://scrollmagic.io/examples/expert/image_sequence.html I cant figute it out, how to make it on gsap 3 only. Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?
-
Hi! I'v read articles how to control video in timeline but I dont have idea how to make same video animation like here https://store.google.com/us/product/nest_cam_battery?hl=en-US I builded some minimal demo. So what I want: Play video till 3-4 sec PAUSE, then when video in the middle of the screen of viewport it continues play.
-
Workflow in Visual Studio Code, Windows 10: 1) First I created a fresh React project with: npx create-react-app my-project 2) Then I downloaded the 'GSAP 3 with Shockingly Green bonus files' ZIP file, version 3.8.0 3) and added the gsap-bonus.tgz in the root directory of my project 4) When I installed the file with : my-project > npm install ./gsap-bonus.tgz, I received the message: added 1 package, and audited 1946 packages in 10s, 58 vulnerabilities (16 moderate, 40 high, 2 critical) 5) After installation: my package.json file looks the same as in the 'module install' video. How can there be that many vulnerabilities in an 'up-to-date' GSAP installation, and do I need to fix this ?
-
hi all, I am trying to add animation to carousel. I am using ngx-slick-carousel for carousel. All animations are working fine but one. when i am swiping the slide, the animation is not taking effect. Animation is working pretty well before and after swipe complete. I want animation to be done while swiping. here is the code: let cards = currentCardBox.querySelectorAll('.card-body') let slideNum = e.currentSlide gsap.to(cards[slideNum+1], { scaleY:1.5, scrollTrigger: { trigger: cards[slideNum], start: 'left 30%', end: "-=100", scrub: true, horizontal: true, markers: true }, }); Q : What I am trying to achieve ? Ans: when the hero card swipes to left, next to hero card become hero card with some animation. Thanks for the help..
-
Hi Everyone, I have been working on the project involving WebXR, using ThreeJs and Gsap 3. And I have notice that when you initialize webXR session (clicking on 'Enter VR' button) update of Gsap's timelines just stops. They mention in How to create VR content on ThreeJs' website that you need to call setAnimationLoop() from their renderer and to pass callback and that you can't use window.requestAnimationFrame() function (I need to investigate this topic more). The problem was solved calling gsap.ticker.tick() from the callback function. For testing, I have added listener to gsap.ticker and it was working fine when webXR session is not initialized. Is there a better method to update gsap timelines, and am I missing something? I used Oculus Quest for headset and Oculus Browser which is based on Chromium.
-
Hi everyone, I am new to GSAP. trying to create a Shrinking header animation. I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..
-
Hello everyone, I'm facing problem in creating this effect in horizontal scroll. https://codepen.io/eighthday/pen/MKqBjX I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo. This is what I did. https://codepen.io/aniketbamotra/pen/wvJrNjr PS. I'm new to web development and this is my first time using gsap so help me with this. Thanks in advance
-
-
Hi all, I was trying to replicate a website here is the link of the site https://space.ge/ . i did all the parts of website except the card one that moves from top till end of the page . i tries doing few stuff like pinning and animating based on position but none of them were successful also those aproches are not dynamic enough . so any body have any idea how to achieve that.
-
I'm trying to make a simple slider that animates-in then out one slide after the other according to the currentStep variable, which gets incremented by 1 at the end of every slide, but nonetheless , I end up getting the same slide over and over again and can't figure out why... -
I am very much confused with the all these libraries.. On the homepage it says all in one .. You just need to import gsap single file. Then on examples i see people have included scrollTo and scrolltrigger separately. Then i see all these libraries are paid. There is no simple table which can tell the difference between free and paid gsap apart from community benefits. Is it like we get some features in pro that are not in free version?? If that is the case all of those codepen are useless for newcomers, because i might be trying hours on some feature which is eventually paid and i am not aware of those. Please can you please resolve the questions ? -
Hi All, I am trying to animate something using scroll trigger (minimal reproducible example in codepen link ). I want to scale the circle to 1 when scroll progress is 25%. And for that reason I tried setting the timeline duration to 4 and the animation duration to 1 but it doesn't work. It still takes the full progress of the scroll trigger to make it scale to 1. Your help is highly appreciated. Thanks Edit: Codepen doesn't seem to be working. Here is a code sandbox instead https://codesandbox.io/s/gsap-scrolll-blimx?file=/src/App.js:0-1097 -
Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M. -
Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating. Please help me I'm new to gsap.
-
Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js
-
Hi everyone, first of all I want to say thank you for this great library! It is really easy to start with it an build great effects Now my question. I have setup a simple example here https://codepen.io/Ogod/pen/abprgQp?editors=0010 Basically all images are arranged in a "gallery". The animation should move them from their calculated starting position to their target position. The animation works really fine on scroll but when the window is resized the images are not aligned correctly anymore (x, y and scale are wrong). So I tried to set invalidateOnRefresh to true and use function based values in the calculations. But then the animations breaks: - the opacity is completely missing - the starting positions of the images are initially missing, they just appearing at the right position when the animation starts after resize: - the starting and ending positions are wrong (images are not aligned correctly) - the animation seems to play backwards when I scroll down, so the images are animating from small to big (to their starting position) instead of big to small Any ideas what is wrong with my animation and invalidateOnRefresh? Thanks for your investigation
