Jump to content
GreenSock

Guest Vic_

show gsap: page split(/flip)

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:

 

http://masons-foundation.org

 

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());
    console.log('split')
    //point to first
    var $wrapC=_$main.children()
    var $firstSl = $wrapC.eq(0)
    //clone
    $firstSl.clone().insertAfter($firstSl)
    $firstSl.wrap("<div id='firstSl' class='firstSl'></div>")
    // point to 2nd
    $wrapC=_$main.children()
    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.

Vinn

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

Thanks for sharing Vinn :)

Link to comment
Share on other sites

Thanks for sharing. Really appreciate having folks like you contributing with what they know. It really helps build the community. Keep them coming. Take a spin with CodePen, as it makes examples like this really easy to edit and play with.

 

http://codepen.io/

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