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

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.

×