Jump to content
Search Community

Animate element to position and pin it there (Fixed position)

Asored test
Moderator Tag

Recommended Posts

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

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?

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

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

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.

 

1551792992_Peek2021-01-1520-25.thumb.gif.839c604d076f0666cf624d9773708568.gif

  • Thanks 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...