Jump to content
yolon

Help getting started creating a jalousie effect

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

(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

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.