Jump to content
Search Community

show gsap: page split(/flip)

Guest Vic_
Moderator Tag

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

Hi, have you seen the page flip examples?

I wanted a variation, for example use menu to navigate and check out gsap page split example:




This assumes you are doing a single page application|push state. Then trick is jquery clone(), here is the magic:

function(_$main, speed) {
    _$main.css("height", $(document).height());
    //point to first
    var $wrapC=_$main.children()
    var $firstSl = $wrapC.eq(0)
    $firstSl.wrap("<div id='firstSl' class='firstSl'></div>")
    // point to 2nd
    var $cloneSl = $wrapC.eq(1)
    $cloneSl.wrap("<div id='cloneSl' class='cloneSl'></div>")

    var he  = _$main.outerHeight()
    var haf = (_$main.width() / 2) + 10
    var doub = ' ' +haf*2 + 'px '
    var lft = '-' +haf + 'px '
    haf = ' ' +haf + 'px '

    TweenLite.to( $('#firstSl'),    0, {clip:"rect(0 "+haf+he+" 0 )" })
    TweenLite.to( $('#cloneSl'), 0, {clip:"rect(0 "+doub+he+haf+" )" })

    TweenLite.to( $('#cloneSl'), speed, {x: haf})
    TweenLite.to( $('#firstSl'), speed, {x: lft, onComplete :$VCM.onAniComplete })

I plan to post more simple gsap examples if that is welcome; and will take requests.


ps: not gsap, but this SPA works w/ SEO, there is a search example on site.

(I do freelance web dev, ideally for ad agency or for accomplished web designer )

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