Jump to content
Search Community

Increase size div to fullscreen with scroll down

rbad test
Moderator Tag

Recommended Posts

Hey there, yeah it's definitely possible. The CodePen is already scaling a div using a scroll trigger with scrub enabled. You'd need to change the tween target and the specific properties that are being animated of course but it's almost the same thing as the demo.

  • Like 4
Link to comment
Share on other sites

 

18 hours ago, rbad said:

I've seen this codepen and it's similar... I only need to increase de size of the orange container. Is it possible?

 

There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky.

 

In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. 

 

See the Pen oNBGzOE?editors=1000 by snorkltv (@snorkltv) on CodePen

  • Like 4
Link to comment
Share on other sites

1 hour ago, Carl said:

 

 

There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky.

 

In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. 

 

 

 

Thank you very much @Carl, I understand that then there is no possibility of setting the progress line, right?

Link to comment
Share on other sites

Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with.

 

if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line).

You would then attach a ScrollTrigger to the timeline

 

See the Pen oNBGzOE?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.

 

 

  • Like 5
Link to comment
Share on other sites

  • 1 year later...

Hello,


Here is an example:
I would like to do something like this but that the pass between sections is like here: https://alvarotrigo.com/fullPage/examples/videoBackground.html

 

There are also two problems:
1. the video pauses when I scroll and when I go back to the top it doesn't start again.
2. when I scroll down and click somewhere, it suddenly goes up.

 

Thank you very much.

Best regards

Link to comment
Share on other sites

Do you have a minimal demo showing the issue? It's very difficult to troubleshoot a live site.

 

And if you're trying to transitions like fullpage, then ScrollTrigger might not be the best option as it designed to work with native scrolling. If you want transitions based on mouse wheel events, then that's what our new Observer plugin is for. 

 

https://greensock.com/docs/v3/Plugins/Observer

 

 

Link to comment
Share on other sites

What I want to do is that when I scroll a div it gets smaller and when it finishes getting smaller, I move to the next slide.
Here I have almost achieved it https://barracuda.pixelarte.com/scroll/, but it doesn't work well to move to the next slide.

 

HTML

<div id="fullpage-scroll">
<div class="section active" id="block-1">
  <div class="scrollMe"></div>
  <div class="iWillExpand"></div>
</div>
<div class="section" style="background-color:red;"></div>
<div class="section" style="background-color:blue;"></div>
</div>


CSS

#block-1 .fp-tableCell {
    width: 100%;
    overflow-y: scroll;
    display: block;
  }
    
  .scrollMe {
    height: 300vh;
    width: 100%;
  }
  
  .iWillExpand {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: aqua;
    transform: scale(1);
    z-index: -1;
  }


Javascript

var myFullpage = new fullpage('#fullpage-scroll', {
    lazyLoad: true,
    normalScrollElements: '#block-1 .fp-tableCell'
});

var container = document.querySelector('#block-1 .fp-tableCell');
var containerHeight = container.scrollHeight;
var iWillExpand = document.querySelector('.iWillExpand');

container.onscroll = function (e) {
    iWillExpand.style.transform = 'scale(' + (1 - 0.5 * container.scrollTop / (containerHeight - 300)) + ')';
};

 

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