Jump to content
GreenSock

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

Recommended Posts

Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks!

 

The animation look like this but using GSAP!

Reference of animation: 

See the Pen HrFBx by dudleystorey (@dudleystorey) on CodePen

Link to comment
Share on other sites

Absolutely, you could totally do something like that with GSAP (and probably a lot easier to replicate and modularize). I don't have time to create that from scratch for you though. To answer your question, it's entirely possible :)

 

Perhaps someone else wants to tackle creating it or referring you to a codepen that'll get you going in the right direction. 

  • Like 1
Link to comment
Share on other sites

You should make a bunch of divs with a for loop, put the same background image into them, set their overflow to hidden, shift their background images by the size of the divs * number of the div, then just tween their rotationY attributes with staggerTo().

  • Like 4
Link to comment
Share on other sites

In that example above the person is using clip: rect which is deprecated, so that example will not work when clip: rect is finally removed completely from the spec.

 

GSAP can do this .. all it is:

  • is fist setting up the vertical tiles to have each part of a background-position that shows one part of the image, making it look like all the tiles are one image
  • basically a for loop that applies the background-position and offsets it for every width of the vertical tile.
  • Then doing a staggerFrom() or staggerTo() tween to animate the rotationY

Most of the set up comes from setting up the initial CSS background-positioning of the vertical tiles. So it is not really a GSAP specific thing. Since GSAP can animate this type of effect. It is just a matter of setting up the tiles with the right background-position. Along with other CSS properties like transform-style: preserve-3d and backface-visibility: visible, and initial position offsets for the tiles parent and individual tiles.

 

You can see here is a similar effect I setup and made, animating a 3D cube, that rotates each separate cube to make one image cube.

 

See the Pen 3420ee19b2518dc2164bb8349b044578?editors=0010 by jonathan (@jonathan) on CodePen

 

I don't have the tiime to do this right now ,, but it is very straight forward since its only animating a flat tile instead of an actual cube.

 

The GSAP part is easy, just one tween.. but setting it up to dynamically take an image and set the right background-position for each vertical tile will take the most time to setup.

 

:)

  • Like 3
Link to comment
Share on other sites

Hey guys I am pretty new in GSAP I am consider as newborn hero in using this animation platform for the web.
Very complex knowledge needed for this animation but I want to share my idea on how to do this... shortly....
I made some pens for venetian... thanks Jonathan.. you are the hero and also may friend jack that helps me even in email!
 

Thanks heroes!

anyone can show off their on gsap for venetian just post here...

Link to comment
Share on other sites

Here is another code exampe I made that is a 3D Tile Venetian Blinds animation using GSAP

 

See the Pen 404c1454dd8674140bf82a88a287d518?editors=0010 by jonathan (@jonathan) on CodePen


 

// only run when DOM is ready
$(document).ready(function() {

  // selectors
  var $image1 = $("#image1"),
      $tiles = $image1.children(".tile");
 
  // create a new timeline in a paused state
  var tl = new TimelineMax({
    paused: true
  });
 
  // one tween to animate the tile blinds
  tl.staggerTo($tiles, 1, {
    css: {
      // rotateY each tile to show the backface
      rotationY: 180,
      // makes sure GSAP will set to flat after it completes to prevent render layered line gaps
      transformStyle: "preserve-3d"
    },
    ease: Power1.easeInOut
  }, 0.1);

  // make sure images are loaded before animating
  $(window).on("load", function() {

    // only run on next requestAnimationFrame
    window.requestAnimationFrame(function() {

      // cache tweens and timeline property and values
      tl.progress(1).progress(0);
      // play the timeline
      tl.play();

    });

  });
 
});

x

The above just is a staggerTo() tween animating the rotationY property of each tile. I tween the transformStyle property so GSAP can set it to flat after each tween ends, so you don't see the line gap between each tile when all the staggers are complete.

 

If you didn't want to use CSS 3D transforms, then you would you animate scaleX instead.

 

Happy Tweening :)

  • Like 2
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.
×