Here you can find the Stuff I share in my videos for free
Welcome and thanks for stopping by. My goal is to help people make cool looking websites. Please take what you need from this page to help you achieve the tastiest website that you can.
How To Install GSAP On WordPress
- Difficulty: EASY
If you need to install GSAP onto your website, here’s how you can do it quickly. Just check out the first 3 minutes of the video below and you’ll have it set up in no time at all! (Showcased using the scroll trigger).
PRESS HERE FOR THE CODE FROM THE VIDEO
function enqueue_gsap_scripts() {
wp_enqueue_script(‘gsap’, get_template_directory_uri() . ‘/gsap/gsap.min.js’, array(), null, true);
wp_enqueue_script(‘scrolltrigger’, get_template_directory_uri() . ‘/gsap/ScrollTrigger.min.js’, array(‘gsap’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_gsap_scripts’);
Scroll Trigger Overlap
- Time Required: LOW
PRESS HERE FOR THE CODE FROM THE VIDEO
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(‘.section’).forEach((section) => {
gsap.to(section, {
scrollTrigger: {
trigger: section,
start: “top top”,
end: “bottom top”,
pin: true,
pinSpacing: false,
scrub: true
}
});
});
});
</script>
DESKTOP ONLY VERSION (USE THIS IF YOU ONLY WANT TO TRIGGER SCROLL OVERLAP ON DESKTOP SIZED SCREENS AND ABOVE)
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
gsap.registerPlugin(ScrollTrigger);
// ScrollTrigger active if the screen width is greater than 1024px
if (window.matchMedia(“(min-width: 1024px)”).matches) {
gsap.utils.toArray(‘.section’).forEach((section) => {
gsap.to(section, {
scrollTrigger: {
trigger: section,
start: “top top”,
end: “bottom top”,
pin: true,
pinSpacing: false,
scrub: true
}
});
});
}
});
</script>
Tell Your Story through a website
- Time Required: MED-HIGH
Contact Me Here
Thanks for stopping by. In the meantime while I’m creating more content, if you’d like a website designed for you, feel free to get in contact below and let’s discuss some sweet ideas! I will respond within 48 hours.