Convert Roblewsky Full Page Slider to GSAP 3

[InTheOne 7 Likes (Newbie)]

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

[PointC 14,428 Likes (Superhero)]

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.

 

 

[InTheOne 7 Likes (Newbie)]

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.

[InTheOne 7 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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  

[PointC 14,428 Likes (Superhero)]

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.

[PointC 14,428 Likes (Superhero)]

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

Happy tweening.

 

[InTheOne 7 Likes (Newbie)]

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. 

[PointC 14,428 Likes (Superhero)]

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