Jump to content
GreenSock

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

Convert Roblewsky Full Page Slider to GSAP 3

Recommended Posts

I'm trying to convert  Craig Roblewsky's 

See the Pen YRzRyM by PointC (@PointC) on CodePen

to GSAP 3 but I'm getting a console log error that I don't understand. Can anyone take a look and see if it's a simple fix? I'd like to use this slider with GSAP3.

 

Thanks!

See the Pen XWbqNWK by jonroc (@jonroc) on CodePen

Share this post


Link to post
Share on other sites

Did I hear my name mentioned? :)

 

It's on my list to convert some of these old projects to GSAP 3, but just haven't had a chance yet. The error is because of the gsTransform in the tweenDot() function. You'll want to switch to the new getProperty() method. 

 

function tweenDot() {
  gsap.set(dotAnim, {time:Math.abs(gsap.getProperty(container, "x")/iw) + 1});
}

More info:

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

Also remember that ThrowProps is now InertiaPlugin.

https://greensock.com/docs/v3/Plugins/InertiaPlugin

 

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Hey, the man himself 😁. Thank you, I'm much closer now but:

  1. There is an issue with the dots stagger animation
  2. Sometimes when I swipe right to left and then try to click the left arrow it gets stuck or I click the right arrow and it jumps way back to slide one or two. 

Sorry I thought this would be a little bit easier, this slider is a bit out of my level of expertise. 

Best.

Share this post


Link to post
Share on other sites

I made a simpler example to troubleshoot why the drag function is not updating the active slide count:

See the Pen ZEGRRLY by jonroc (@jonroc) on CodePen

function slideAnim(e) {
  oldSlide = activeSlide;
  // dragging the panels
  if (this.id === "dragger") {
    activeSlide = offsets.indexOf(this.endX);
    console.log(activeSlide);
  }

On the old setup the activeSlide variable is getting updated properly but with GSAP3 it always returns -1

Share this post


Link to post
Share on other sites
7 minutes ago, InTheOne said:

On the old setup the activeSlide variable is getting updated properly but with GSAP3 it always returns -1

Good catch! This is related to a bug related to endX that has already been fixed in the latest beta: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

I am betting that Craig found it because you asked about converting this slider to GSAP 3 :) 

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites
1 hour ago, ZachSaucier said:

I am betting that Craig found it because you asked about converting this slider to GSAP 3 :) 

Yep. I discovered that while converting the demos after this thread was started.

 

@InTheOne I should have those conversions done shortly and will post them in my original Full Screen Slider thread. Stand by.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

@InTheOne I've updated the sliders and posted them in the original thread.

Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites
2 hours ago, PointC said:

@InTheOne I've updated the sliders and posted them in the original thread.

Thank You! I'll post my version which is going to be a simpler hero slider that is not full screen when I'm done. Much appreciated. 

  • Like 1

Share this post


Link to post
Share on other sites

Happy to help. Yes, please post back with your final result. I'd love to see it. :)

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×