Jump to content
GreenSock

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

Help getting started creating a jalousie effect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Any idea how one would go about creating a jalousie,

Something like what is found here

  • Like 1

Share this post


Link to post
Share on other sites

For this effect, it's a matter of taking an <img> src or a style:background-image url and applying it as a background to a series of dynamically created elements with their respective backgrounds left offset by the width * index of the dynamic elements respectively. You then animate those new elements in series. Give me a few minutes and I'll get a codepen together to illustrate.

  • Like 1

Share this post


Link to post
Share on other sites

Here is a quick example 

See the Pen qadqxE?editors=0110 by sgorneau (@sgorneau) on CodePen

 

And just a note ... this only shows 1 image sliced ... no transition to another image behind it. All that would require is the same manipulation principles (and CSS to stack the .jalousie divs) and placing these tweens into a timeline.

 

And by adding a few data attributes to each .jalousie divs to swap in some hardcoded settings, you can give more control about number of slices, speed of animation and direction of animation) to complete the package.

  • Like 4

Share this post


Link to post
Share on other sites

Thank you so much!!
I will get to implementing transitions to another image

Share this post


Link to post
Share on other sites

Nice work, Shaun!

Share this post


Link to post
Share on other sites

(Since I expanded on your example, I take the liberty, not to open a new post, but continue here.)

 

First of all: thank you, Shaun, for your script!!! What an insight for me!!!

 

I played around a little bit with it, trying to adapt it to vw and vh, and encounter this strange irregularity that, once there are more than 10 slices, a "time cut" or "time jump" (or whatever it should be called) on the 11th slice happens, meaning that its animation starts earlier as expected. Here is my pen:

 

See the Pen eBQLVR by rowild (@rowild) on CodePen

 

I can't explain myself, why this is happening. Do you have an idea? Or anybody else?

Thanks in advance!

Share this post


Link to post
Share on other sites

Robert Wildling it looks like you are mixing GSAP with CSS transitions. As a rule of thumb you should not use both on the same element or child elements.

 

You should remove any CSS transition properties on all your span tags.

 

Otherwise you will see crazy behavior while GSAP and CSS transitions battle to the death for control of your elements.

 

:)

  • Like 3

Share this post


Link to post
Share on other sites

 GSAP and CSS transitions battle to the death for control of your elements. :)

 

Ha! I had this sudden Tron-style vision of a death-match between CSS and GSAP.

 

Xy3KM8O.gif

  • Like 3

Share this post


Link to post
Share on other sites

@Jonathan Thank you for your tip! I updated the pen, and it works.

 

Could you please help me understand two more things:

 

1. Why is this particular solution not solvable with TweenMax, but only TimelineMax (at it seems to me, anyway)?

 

2. There is a "walking shadow" before and after the animation of the slices. No matter whether opacity or autoalpha is used. I cannot explain myself where this could come from (the div-slice is st to transparent...)... 

 

Thank you!

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×