How to increase the div (#container) width while reaching the div while scrolling to bottom

[amshath dharama]

What I mean by div is element which as id of container
Note : this is landing page and once the page load we can see the div in the viewport, I want to make the width to 90vw when user reaches the div or user reaches little bit top to the div content

See the Pen dywYwge by ammshath1997 (@ammshath1997) on CodePen

[mvaneijgen]

Hi @amshath dharama welcome to the forum!

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you. 

 

If you need help getting started check out these awesome starter guides:

 

Just a tip, I would give the element you want to animate the final width you want it to have, eg 90vw. And then use the scale property to animate .from() scale: 0.7 (ish). I would first focus on the animation before worrying about ScrollTrigger. Just post back here when you're stuck with the GSAP code you've tried and we're happy to take a look and point you in the right direction! 

 

 

 

 

[amshath dharama]

Hi @mvaneijgen,
First I want to thanks for your valuable comment which almost help me to understand, since I'm new to this tech, your comment help me lot,
so far I have triggered the animation while scroll to bottom and now trying  revert the element to it's actual state while scrolling up, I have saved my latest changes , that would be great if you can have a look on my code and give me some feedbacks and please guide me I'm going something wrong to when scrolling up 

thanks again, 

[mvaneijgen]

Great job! Looking good already! Check out the toggleActions on the docs, that is what I think you need (I've add them to the pen below) https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Also what I've done, because I think it will be easier to manage is update your .next-section to be 90vw in your CSS and I've changed your .to() tween to a .from() tween and changed your scale: 1.3 to scale 0.8, now it will scale .from() smaller to exactly 90vw

 

There is also another line I've add to your ScrollTrigger object and that is scrub: true, this is commented out at the moment, but if you turn it on you can test what it will do, maybe you'll like that effect. Good luck and happy tweening! 

 

See the Pen NWeGJLz?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[amshath dharama]

And one more thing when I tried the same code on angular it is not working, as expected or same like codepen
I'm using gsap : 3.12.2 installed in my project and used the same code as codepen but that is not working, any thought about this

[amshath dharama]

@mvaneijgen thanks again for the awesome fix and simple and easy explanation on toogleActions, Do you know the same code which is working on codepen fine but not working properly on angular, 

I've triggered the animation in ngOnInit but animation is not working on scroll

 

[amshath dharama]

@mvaneijgen thanks for the support, heureka issues are fixed when we are working with angular we should use import and resgisterPlugin part which solved the issue, 
line number 3 and line number 16 fixed the issue,

thanks for the support hope the reason for this topic is fixed, let me mark as complete

import { Component, OnInit } from '@angular/core';
import gsap from 'gsap';
import ScrollTrigger from "gsap/ScrollTrigger";

@Component({
  selector: 'app-recent-work',
  templateUrl: './recent-work.component.html',
  styleUrls: ['./recent-work.component.scss']
})
export class RecentWorkComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

    gsap.registerPlugin(ScrollTrigger);
    const container = document.querySelector(".recent-work-wrapper")

    const scrollBox = gsap.timeline({
      scrollTrigger: {
        trigger: container,
        start: "top 80%",
        end: "bottom 20%",
        toggleActions: "restart none none reverse",
        markers: true,
        scrub: true,
      }
    })
    scrollBox.to(container, {
      scale: 0.8,
    })
  }

}