How to pin a parent div for a specific period with scrollorama plugin

Question

How to pin a parent div for a specific period with scrollorama plugin

825 Views Asked by Muhammad Hamada At 18 April 2025 at 10:32

I'm using "scrollorama" plugin to achieve a parallax site

I want to pin the parent div of the animated elements for a specific period and then unpin the parent div and animate the next section of code ....

please see this link to understand what i mean

In this site i want to delay the first section from animation while the site logo "Prototype" move up to its fixed position, then the first li child's begin to enter the scene so i want to prevent the li from beginning to move up and the next section entering the scene

I know this action is called "pin" but i don't know how to use it...

<body>
<a class="fixed" href="prototype.html"><img src="images/logo.png"/></a>
<ul class="curtains">
    <li>
        <div class="cont clearfix">
            <ul>
                <li class="img_1"><img src="images/01.jpg"/></li>
                <li class="img_2"><img src="images/02.jpg"/></li>
                <li class="img_3"><img src="images/03.jpg"/></li>
                <li class="img_4"><img src="images/04.jpg"/></li>
                <li class="img_5"><img src="images/05.jpg"/></li>
                <li class="img_6"><img src="images/06.jpg"/></li>
            </ul>
        </div>
    </li>
</ul>

$('.curtains > li').css({position: 'fixed',height:'100%'});

$('.curtains').curtain();

var scrollorama = $.scrollorama({
    blocks:'.curtains'
});

$( window ).scroll(function(){
    if(parseInt($('.fixed').css('top'),"10") > '27'){
        $('.fixed').css('top',screen_H*0.5 - $(document).scrollTop()+'px');
    }
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_1',{
    delay:400, duration:150, property:'left', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_2',{
    delay:400, duration:200, property:'top', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_3',{
    delay:400, duration:190, property:'right', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_4',{
    delay:400, duration:140, property:'left', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_5',{
    delay:400, duration:180, property:'bottom', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_6',{
    delay:400, duration:120, property:'opacity', start:0, end:1
});

Original Q&A

There are 1 best solutions below

**Dexture** · Answer 1

you can pin the main div first and run the animation on its chid div . to pin

    controller.pin($('#examples-2'), 3000, {
  anim: (new TimelineLite())
    .append(
      TweenMax.fromTo($('#move-it'), .5, 
        {css:{left: -200, top: 500}, immediateRender:true}, 
        {css:{top: -400}})
    )
    .append(
      TweenMax.to($('#move-it'), .5, 
        {css:{left: 0}})
    )
});

in this code examples-2 is main div , which will pin when it come to center of the page,3000 is the pixel (whole animation will complete in 3000 pixel ).and then move-it it sub div which will animate as shown in code. to remove pin.

controller.removePin('#examples-2', false);

you can see the detail about how to use pin on http://johnpolacek.github.io/superscrollorama/

How to pin a parent div for a specific period with scrollorama plugin

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in PARALLAX

Related Questions in SUPERSCROLLORAMA

Trending Questions

Popular # Hahtags

Popular Questions