Jump to content
Search Community

Overlapping Image Gallery/Slideshow

MindTattoos test
Moderator Tag

Recommended Posts

Hi, I'm new to GSAP and have been playing around with it for a few weeks. So far I love the results and have made/modified slideshows etc (from Codepens etc).

I managed to integrate GSAP/Barba into WordPress for page transitions and basic animations so far and I'm hoping to stick with GSAP but my client suddenly decided he doesn't like full page slideshows etc I've made and got an idea he wants something very specific that looks/functions like this: 
http://www.jquerycarouselimagevideo.com/wordpressplugin/whiteResponsivePerspective.html

Personally, I hate the example he's given and it look so out of date (to me) but I need to prove my case by creating something similar first - I found a pen and played around with it but so far I cant figure out how to get an overlap (which he wants) and I've found no GSAP examples even close to this... Any ideas where to start?

Thanks

See the Pen XWjBKYg by fckbranding (@fckbranding) on CodePen

Link to comment
Share on other sites

Hey MindTattoos and welcome to the GreenSock forums.

 

1 hour ago, MindTattoos said:

he wants something very specific that looks/functions like this: 
http://www.jquerycarouselimagevideo.com/wordpressplugin/whiteResponsivePerspective.html

You're right, that's quite a dated concept :) 

 

1 hour ago, MindTattoos said:

I cant figure out how to get an overlap

There are multiple ways to set up that sort of layout. I'd probably

  • Absolutely position the images within a container.
  • Then I'd create a timeline that animates the images as you need them to be animated including fading, their position, scaling, and looping (i.e. progress of 0 should be visually equivalent to a progress of 1).
  • Then I'd create a Draggable with type x with a proxy (empty DOM element, not on your page) as a target. I'd set the trigger for the Draggable to the container. I'd apply a min and max to the Draggable as well. Then in the onUpdate of the Draggable I'd update the progress of the timeline I created earlier based on the current x over the total distance of the Draggable.

Does that make sense?

 

But if you're planning on not doing it anyway I'd try to talk down the client before doing the work :) 

  • Like 1
Link to comment
Share on other sites

Hey Zach, 

Firstly thanks for the quick reply. 

 

That does make sense... I'll have play in the morning.

 

I've worked with this client for years but he's a bit of a 'visual' type that like to see it not working first (if that makes sense). 

 

I hope to show him 'my version' against his and talk him down but he's paying for my time so I can't grumble even though to me it is kind of an exercise in futility (hopefully),

 

At the least it will give me a little more GSAP experience I just wish I'd found it sooner.

 

It's amazing that all our nice ideas and work can be wiped up by a client's Google 'research' :)

Link to comment
Share on other sites

Hi Avabrooks,

 

Thanks for the info... I usually don't rely on 'plugins' as they do often cause more problems than good.

 

Luckily, I'm fully able to design and code for WP - I've recently updated a bespoke core theme I built using Bootstrap 4  to now include GSAP + Barba.

 

The gallery that prompted this post was an issue specifically at a client's request and I've now built it.

 

Personally, I hate the result and I'm hoping for him to realize how horrible it is and use the alternatives I've shown him using GSAP.

  • 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...