Asored Posted November 25, 2020 Share Posted November 25, 2020 Hi :) I'm new with GSAP and I like it very much! Thanks for your great work! Just a beginner question: I try to animate the following simple thing: https://codepen.io/Asored/pen/PoGYyOg In my project I trigger the window scroll position instead of waiting for a click event. How could I create the animation from current relative position to a fixed position on bottom right? This is my try: ScrollTrigger.create({ start: 'top 20%', trigger: '#contact--btn', markers: false, scrub: true, onEnter: () => { var windowWidth = $(window).width(); var windowHeight = $(window).height(); var buttonWidth = $("#contact--btn").width(); var buttonHeight = $("#contact--btn").height(); var buttonOffsetLeft = $('#contact--btn').offset().left; var buttonOffsetTop = $('#contact--btn').offset().left; gsap.to('#contact--btn', { x: (windowWidth - buttonOffsetLeft) - buttonWidth - 250, y: (windowHeight - buttonOffsetTop) - buttonHeight - 250 }) setTimeout(function () { $("#contact--btn").css("position", "fixed"); }, 10) }, }) This is not really elegant. Also the animation is not smooth because of the small break from the setTimeout function. Is there a better way to create animations like this with GSAP? Thanks in advance for your help! :) Best regards See the Pen PoGYyOg by Asored (@Asored) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 26, 2020 Share Posted November 26, 2020 This is actually the perfect use case for the "Flip" plugin we've been working on and hope to release within the next month. It makes exactly this type of thing crazy simple. Here's a fork of your CodePen with Flip doing all the work for you: See the Pen e965361f52378cad9437c729f1f2b668?editors=0010 by GreenSock (@GreenSock) on CodePen That pen eliminates the dependency on jQuery too. The Flip plugin is locked to the CodePen domain, so you won't be able to use that outside of CodePen right now. Note that Flip is not officially available yet, and it will be a "members-only" plugin for "Shockingly Green" and "Business Green" members. See https://greensock.com/club for details. We haven't announced anything yet, but club members can request early access to the beta and we'd be happy to do oblige. We can get members a version of the file that has no restrictions (not locked to CodePen.io). If you don't want to join the club to get early access, you could accomplish something like this with the "Flip" helper function we posted a long time ago in our "helper functions" section of the docs. But the upcoming plugin handles a LOT more (including nested transforms). Does that help? 3 Link to comment Share on other sites More sharing options...
Asored Posted November 26, 2020 Author Share Posted November 26, 2020 This absolutely helped me as well! Many thanks! Link to comment Share on other sites More sharing options...
cyberp Posted January 15, 2021 Share Posted January 15, 2021 Hi, sorry for bumping old post but it's kinda related. I'm already enjoying using gsap library and I found about new Flip plugin. It's look great! I try to play with snippet from above and I run into issue. Animation not working as expected if I scroll page. See codepen fork. See the Pen abmPdBm by underwebrs (@underwebrs) on CodePen What I'm doing wrong? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2021 Share Posted January 15, 2021 Hey cyberp and welcome to the GreenSock forums. 25 minutes ago, cyberp said: Animation not working as expected if I scroll page. It seems to be working to me. What's not as you expect? Link to comment Share on other sites More sharing options...
cyberp Posted January 15, 2021 Share Posted January 15, 2021 4 hours ago, ZachSaucier said: Hey cyberp and welcome to the GreenSock forums. It seems to be working to me. What's not as you expect? If I click the button before scrolling, everything work fine. But if I scroll page down and then click the button, in that case animation make some 'jumps' at start. Here is demonstration. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 21, 2021 Share Posted January 21, 2021 1) I wonder if you're using an outdated version of Flip Plugin? There was a bug early on that caused it not to factor in the scroll when absolute: true was set. When I tried your CodePen today, even after scrolling all the way down on a short window, it seemed to work exactly the way I'd expect. 2) As far as I can tell, this has nothing to do with Flip - isn't it just the nature of the change you're making to the DOM? In other words, if you've got something that's placed way down in the DOM and you scroll to it, and that's making the page "long" (tall), and then you switch it to position: fixed and take it out of the document flow, that'd cause things to collapse on the page, thus the scrollbar would jump. See what I mean? But perhaps I'm misunderstanding what you're describing. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now