Jump to content
Search Community

Help getting started creating a jalousie effect

yolon test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

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

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
Link to comment
Share on other sites

  • Solution

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
Link to comment
Share on other sites

  • 3 months later...

(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!

Link to comment
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
Link to comment
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!

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