skyfy Posted August 27, 2020 Share Posted August 27, 2020 (edited) Hi , I am trying to achieve similar effect as the below post in Gatsby, I am new to Gsap much appreciate any support. https://codesandbox.io/s/gatsby-tests-xyij4?fontsize=14&hidenavigation=1&theme=dark Edited August 27, 2020 by skyfy Wrong link placement Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 27, 2020 Share Posted August 27, 2020 Are you trying to lock the text and image together on scroll? Link to comment Share on other sites More sharing options...
skyfy Posted August 27, 2020 Author Share Posted August 27, 2020 I am trying to lock the text and scroll the image and release the lock on Text to scroll with image from center. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 27, 2020 Share Posted August 27, 2020 I have simplified your example and it works.https://codesandbox.io/s/new-glade-fetuz You need to pin the title div and turn off pinSpacing. 1 Link to comment Share on other sites More sharing options...
skyfy Posted August 27, 2020 Author Share Posted August 27, 2020 Thank you, much appreciate the support, some reason its not working in my project, I will try and debug and update the status. Any suggestions or pit falls I should consider if sticky is not working ? Link to comment Share on other sites More sharing options...
skyfy Posted September 1, 2020 Author Share Posted September 1, 2020 This Solution works perfectly in safari, firefox and Chrome seems to have a problem with pinning. any suggestions would greatly appreciated. Pin Reparenting worked solved the issues across various browsers. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 1, 2020 Share Posted September 1, 2020 It seems to work fine for me in Chrome. Can you please share a minimal reproduction of the issue? Maybe using CodePen? Link to comment Share on other sites More sharing options...
skyfy Posted September 3, 2020 Author Share Posted September 3, 2020 We are expecting the problem is caused by will change parameter in our css attributes of parent container. we will try and recreate the problem and share it . Link to comment Share on other sites More sharing options...
skyfy Posted September 9, 2020 Author Share Posted September 9, 2020 Hello, We finally tracked the problem with our css styling, we are facing a minor issue with scrolltrigger. How to approach delay of scroll trigger on load. below is the code which we are using in Gatsby. we want to set color first and wait for animation to complete and set sticky mode else stickymode inherits orginal colors. any suggestions would be great help. useEffect(() => { if (titleRef.current == null) return if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals('ScrollTrigger', ScrollTrigger) } const intro = () => { const introTL = gsap.timeline() introTL.to('html', 0, { css: { visibility: 'visible' }, }) } const ToggleColor = () => { const toggleColorTL = gsap.timeline() toggleColorTL.from('html', { duration: 0.01, scrollTrigger: { trigger: toggleColorRef.current, start: 'top-=15% top', end: 'bottom top+=10%', toggleAction: 'play reset reset reset ', markers: true, scrub: 0.1, }, '--text-color': 'var(--accent)', '--background-color': 'var(--dark)', }) } const Sticky = () => { ScrollTrigger.saveStyles(titleRef.current) ScrollTrigger.matchMedia({ '(max-width: 1199px)': () => { ScrollTrigger.create({ trigger: titleRef.current, pin: true, start: 'top-=14% top', end: 'bottom center-=2%', // markers: true, pinSpacing: false, pinReparent: true, // scrub: 0.5, // pinType: 'fixed', anticipatePin: 1, // refreshPriority: -1, }) }, '(min-width: 1200px)': () => { ScrollTrigger.create({ trigger: titleRef.current, pin: true, start: 'top-=13.5% top', end: 'bottom center-=35%', markers: true, pinSpacing: false, pinReparent: true, scrub: 0.5, // refreshPriority: -1, // pinType: 'fixed', anticipatePin: 1, }) }, }) ScrollTrigger.refresh(true) } const master = gsap.timeline() master.add(ToggleColor()).add(intro(), '+=2').call(Sticky()) }, []) Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 It seems like you want something like this (untested)? Where you use the onLeave callback to set some things up? useEffect(() => { if (titleRef.current == null) return if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals('ScrollTrigger', ScrollTrigger) } const intro = () => { gsap.set('html', { visibility: 'visible' }) } let firstTime = true; const ToggleColor = () => { gsap.from('html', { duration: 0.01, scrollTrigger: { trigger: toggleColorRef.current, start: 'top-=15% top', end: 'bottom top+=10%', toggleAction: 'play reset reset reset ', markers: true, scrub: 0.1, onLeave: () => { if(firstTime) { intro() Sticky() firstTime = false } } }, '--text-color': 'var(--accent)', '--background-color': 'var(--dark)', }) } const Sticky = () => { ScrollTrigger.saveStyles(titleRef.current) ScrollTrigger.matchMedia({ '(max-width: 1199px)': () => { ScrollTrigger.create({ trigger: titleRef.current, pin: true, start: 'top-=14% top', end: 'bottom center-=2%', // markers: true, pinSpacing: false, pinReparent: true, // scrub: 0.5, // pinType: 'fixed', anticipatePin: 1, // refreshPriority: -1, }) }, '(min-width: 1200px)': () => { ScrollTrigger.create({ trigger: titleRef.current, pin: true, start: 'top-=13.5% top', end: 'bottom center-=35%', markers: true, pinSpacing: false, pinReparent: true, scrub: 0.5, // refreshPriority: -1, // pinType: 'fixed', anticipatePin: 1, }) }, }) ScrollTrigger.refresh(true) } ToggleColor() }, []) Notice that I also condensed some of your tweens: // not preferred introTL.to('html', 0, { css: { visibility: 'visible' }, }) // preferred introTL.set('html', { visibility: 'visible' }) Link to comment Share on other sites More sharing options...
skyfy Posted September 9, 2020 Author Share Posted September 9, 2020 Thank you again for the support, current edition initializes on first scroll, and its skips the pinning. We are setting the theme which has transition duration, if we set the pin on load it freezes the initial colors of the pinnned element,. pinning has to trigger right after transition. completion. can we have an absolute top value , currently we have set the value manually, ? start: 'top-=14% top', Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 2 hours ago, skyfy said: can we have an absolute top value , currently we have set the value manually, ? Sorry, I don't understand the question. It'd likely help if you made a minimal demo for us to look at Link to comment Share on other sites More sharing options...
skyfy Posted September 11, 2020 Author Share Posted September 11, 2020 Hello again, we have found the solution, primarily when you pin the entire element is placed outside the component. We had background and text colors changing dynamically on scroll, this caused colors to freeze when pinned, for which we used theme provider global context to pass the colors now it works even outside the component. We will try and share minimal working file at the earliest. much appreciate the support cheers Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now