So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at a certain point into the HTML widget
, so below is everything you will need!
To control a container ( or anything really ) put the following code into the html widget and remember to call the class name referenced in the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const containerToGrow = gsap.timeline({
scrollTrigger: {
trigger: ".container-to-grow", // You can name this class whatever you want
start: '-250px center', // Adjust the start position value as needed
scrub: true,
end: "280px center", // Adjust the end point value as needed
markers: false,
},
});
containerToGrow
.fromTo(".container-to-grow",
{ scale: 0.4 }, // start state of animation
{ scale: 0.9, ease: "linear" }) // end state of animation
</script>