maxvia

Hi guys, I was looking at this website https://rino-pelle.com/ and there website's footer. I am quite confused on the way they make their footer appear. I am not sure what is happening there, is it some parallax effect or some pinning on the whole website except the footer? On the following simple example how would you do to have this type of effect? import React from "react" import gsap from 'gsap' const IndexPage = () => { return ( <div > <Intro /> <Description /> <Conclusion /> <Footer /> </div> ) } export default IndexPage Any tips is appreciated ! Thank you!! ezgif.com-gif-maker.mp4

@Rodrigo I applied what you told me. Works like a charm. Will keep it this way unless told otherwise ! Thank you!!

Thank you very much @Rodrigo for your time and replies. I do need to review some of react basics... will definitely check out the link you send me !

@Rodrigo I am having some issues determining my container height. I was looking at the dom and I saw that the 'pin-spacer' has the perfect inline-styling height once the Dom is loaded. I was trying to use this value in order to give to my container height but didnt succeed. Anyway to access this value? Thank you

Hi @Rodrigo Thank you for your fast and detailed reply! I am going to read it through and update accordingly. Sorry if I posted the same question 3 times, didn't do it on purpose. I think there was an error with the forum's server this morning or may be it comes from my connection but I had some issues posting my question. Will keep you updated once I have fixed my errors Thanks

Hi guys, I am having this weird issue when I try to change the state of my children component. import React, {useEffect, useRef, useState} from "react" import SEO from "../components/seo" import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' //Homepage components import Navbar from '../components/share/Navbar' import Banner from '../components/homepage/Banner' import IntroductionText from '../components/homepage/introduction/IntroductionText' import IntroductionSlider from '../components/homepage/introduction/IntroductionSlider' import HorizontalCarousel from '../components/homepage/HorizontalCarousel' import Rooms from '../components/homepage/rooms/Rooms' import Activities from '../components/homepage/activities/Activities' import Spa from '../components/homepage/spa/spa' import Instagram from '../components/homepage/instagram/InstagramGallery' const IndexPage = () => { let roomsContainer = useRef(null) let spaContainer = useRef(null) let mainContainer = useRef(null) let navbar = useRef(null) const [showNavbar, setShowNavbar] = useState(false) useEffect( () => { gsap.registerPlugin(ScrollTrigger) // navbar ScrollTrigger.create({ start:"100px", end: "bottom bottom", markers: true, onEnter: () => { setShowNavbar(true) console.log('hey') }, onLeaveBack: () => { setShowNavbar(false) console.log('hey') }, }) }) return ( <div ref={el => mainContainer = el} style={{backgroundColor: 'white', position: 'relative', height: '100%'}} > <SEO title="Home" /> <Navbar showNavbar={showNavbar} /> <Banner/> <IntroductionText /> <IntroductionSlider /> <HorizontalCarousel /> <div ref={el => roomsContainer = el}> <Rooms /> </div> <div ref={el => spaContainer = el}> <Spa /> ehll </div> <Activities /> <section className='insta'> <Instagram /> </section> <div>This is last</div> </div> ) } export default IndexPage I have created a <Navbar /> component that receive a state change after scrolling down a 100px. This is working well, my Navbar receive the state change and update accordingly (background color change using gsap) HOWEVER after scrolling down for a little bit (arround the middle of my app) I get the following error 'GSAP target null not found.' which is causing an issue to my <Instagram /> component who also has gsap in it. It doesnt work anymore even though it usually works really well. The weirdest part is that when I dont apply a state change in my onEnter and onLeaveBack fonctions but just console.log('hey') i do not have 'GSAP target null not found.' showing in my console and my Instagram component works well. Any idea where this is coming from ? May be another way with gsap to have my Navbar component update after scrolling down a 100px? Thank you for your help!

Hi, For some reason I have this warning poping up in my console. I was reading on the forum that it is appearing when you add this property next to a css object. I dont think it is the case for me? Any idea where this is coming from? My component is usually working however sometimes I have a weird issue (I will have open another thread about it). Thank you ! import React, { useEffect, useRef } from "react"; import gsap from 'gsap' import useWindowDimensions from './windowDimensions' import { withPrefix } from 'gatsby'; const InstagramGallery = (props) => { let gridContainer = useRef(null) let grid = useRef(null) let centerPiece = useRef(null) let centerBlock = useRef(null) let gridBlock = useRef(null) gridBlock.current = []; const addToBlock = el => { if (el && !gridBlock.current.includes(el)) { gridBlock.current.push(el); } }; let gridLayer = useRef(null) gridLayer.current = []; const addToGridLayer = el => { if (el && !gridLayer.current.includes(el)) { gridLayer.current.push(el); } }; const { height, width } = useWindowDimensions(); const scrollingArea = height * 3.3 let positionCenter = height * 3.3 / 5 useEffect(() => { gridLayer = gridLayer.current gridBlock = gridBlock.current let gridBlockNotCenter = gridBlock.filter( e => { return e !== centerBlock }) gridContainer = gridContainer.current gsap.to([gridBlockNotCenter], {display: 'none'}); gsap.timeline({ scrollTrigger: { trigger: centerBlock, start: 'top top', end: `+=${scrollingArea}`, scrub: true, pin: grid, anticipatePin: 1, } }) .set([gridBlockNotCenter], {autoAlpha: 0, display: 'block'}) .to([gridBlockNotCenter], {duration: 0.1, autoAlpha: 1}, 0.001) .from(gridLayer, { scale: 3.3333, ease: "none", transformOrigin: '44.9% 50%' }); gsap.set(gridBlock, {backgroundImage: i => `url(${withPrefix(`/instagram/instagram-${i}.jpg`)})`}); gsap.to([centerPiece, gridBlock], {autoAlpha: 1, duration: 0.5}); }) return ( <> <div className="grid-container" style={{position: 'relative'}} ref={el => gridContainer = el} > <div className="grid" ref={el => grid = el} > <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" style={{backgroundColor: 'blue'}} ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer centerPiece" ref={el => { addToGridLayer(el); centerPiece = el }} > <div className="gridBlock centerBlock" ref={el => { addToBlock(el); centerBlock = el }} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <a href="https://instagram.com/hotel_acr" target="_blank" style={{width: '100%', height: '100%', cursor: 'pointer', zIndex: 10}} > <div className="gridBlock" ref={el => addToBlock(el)} > </div> </a> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> <div className="gridLayer" ref={el => addToGridLayer(el)} > <div className="gridBlock" ref={el => addToBlock(el)} ></div> </div> </div> </div> <div className='row instagram-text'> <div className="col-sm-10 offset-2"> <p className='small-title'>INSTAGRAM</p> <div style={{fontSize: 30}}>Follow Us</div> <div style={{fontSize: 30, fontStyle:'italic'}}>@hotel_acr</div> <div className="offset-1 button-area"> Join the adventure! <div className="button"> FOLLOW US </div> </div> </div> </div> </> ); }; export default InstagramGallery;

works great! thanks!

import React, {useEffect, useRef} from "react" import SEO from "../components/seo" import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' //Homepage components import Banner from '../components/homepage/Banner' import IntroductionText from '../components/homepage/introduction/IntroductionText' import IntroductionSlider from '../components/homepage/introduction/IntroductionSlider' import HorizontalCarousel from '../components/homepage/HorizontalCarousel' import Rooms from '../components/homepage/rooms/Rooms' import Activities from '../components/homepage/activities/Activities' import Spa from '../components/homepage/spa/spa' import Instagram from '../components/homepage/instagram/InstagramGallery' const IndexPage = () => { let roomsContainer = useRef(null) let spaContainer = useRef(null) let mainContainer = useRef(null) useEffect( () => { gsap.registerPlugin(ScrollTrigger) //spa gsap.fromTo(mainContainer, {backgroundColor: 'white'}, { duration: 3, backgroundColor: '#899781', ease:"linear", scrollTrigger: { trigger: spaContainer, // markers:true, start:"top 50%", //when top of herman passes 75% viewport height end:"bottom 0%", //when bottom of herman passes 25% viewport height //events: onEnter onLeave onEnterBack onLeaveBack toggleActions:"play pause play none" //options: play, pause, resume, reset, restart, complete, reverse,none } }) //rooms gsap.fromTo(mainContainer, {backgroundColor: 'white'}, { duration: 3, backgroundColor: '#fcefee', ease:"linear", scrollTrigger: { trigger: roomsContainer, // markers:true, start:"top 50%", //when top of herman passes 75% viewport height end:"bottom 0%", //when bottom of herman passes 25% viewport height //events: onEnter onLeave onEnterBack onLeaveBack toggleActions:"play reset restart none" //options: play, pause, resume, reset, restart, complete, reverse,none } }) }) return ( <div ref={el => mainContainer = el} > <SEO title="Home" /> <Banner/> <IntroductionText /> <IntroductionSlider /> <div ref={el => roomsContainer = el}> <Rooms /> </div> <div ref={el => spaContainer = el}> <Spa /> </div> <Activities /> <section> <Instagram /> </section> <div>This is last</div> </div> ) } export default IndexPage Hi Guys, I am trying to have my app background color change depending or where I am in my app. I tried to play with the "play pause resume etc..." features however I dont seem to get it. I mostly have problems when I enter back the divs that doesnt make it smooth at all. Seems like features are overriding. Any advice on how you would do it to make is as smooth as possible? Thank you!

Awesome! Thank you very much to you two! This is exactly what I was looking for Cheers Maxime

Hi, I am quite new into gsap and would like to have some enlightenments on how you would proceed with this type of effect (see video below ) that I found on https://cultivatingthevanguard.com/ . I am thinking of using scrolltrigger, probably make the div on the left sticky or absolute and give it a y value dependant of my scrolling activity. Where I am the most confused is how to calculate my y value. Is there anyway to figure out the value depending of my viewport? Also is that how you would proceed? Any advice is appreciated. Thank you guys! gsap-scroll.mp4

Hey @akapowl, thank you very much for your detailed answer and examples. Works like a charm Cheers!

Hi, I would like to create a similar effect as the one here: https://cultivatingthevanguard.com/ (1st carousel) where you have the cursor flipping to the left when crossing to the left if the cursor is on the left part of the image and right when on the right part of the image. I have can have access to my div coordinates using the getBoundingClientRec() fonction, using calculation and mouseposition I could figure out if im on the left side or right side of the image however I am not sure how I could initiate a flip when crossing the div? Any help is appreciated. Thank you!