markpopkes
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by markpopkes
-
-
-
Thank you for the quick reply.
So the way I'm calling out my code is like this:
All my scrollTrigger code is put into a function and then called when the window "loads". I'm under the impression that my ScrollTrigger script is in fact loading after the page loads -- unless I'm missing something.
// Set up App object and jQuery var App = App || {}, $ = $ || jQuery; App.CTA_Sticky = function() { // all my ScrollTrigger ScrollTrigger.matchMedia({ var tl = gsap.timeline({ // my code here }); }); } $(window).on('load', function() { App.CTA_Sticky(); });
I tried to call ScrollTrigger.refresh() but can't seem to figure out where to put it because it never made a difference.
-
So, the Codepen demo DOES NOT replicate my issue -- which is sooooo frustrating. The Codepen demo works flawlessly. Hopefully screenshots can help.
When you open the page, the start position is totally off.
When you resize the browser oh so slightly, the start position is where it should and ScrollTrigger works like magic.
It's super weird and I cannot figure out why. I've tried other triggers, endTriggers, etc. Nothing. Other pages look good. The only thing I can think of is I have a lot of show/hide functionality with those "view floor plan" buttons. Perhaps that's messing things up? Not using floats, but flexbox, too.
I wish I could share a LIVE working page with the issue.
Official code:
ScrollTrigger.matchMedia({ '(min-width: 1024px)': function () { var tl = gsap.timeline({ scrollTrigger: { //markers: true, trigger: '#main', start: 'bottom bottom', endTrigger: '.footer', end: 'bottom bottom', scrub: true, toggleActions: 'play none reverse none' } }); tl.to('.js-text-header', { duration: .25, opacity: 1, height: 'auto' }); tl.to('.page-cta .grid-container', { duration: .25, boxShadow: '0 0 0px 0px #fff' }); } });
(sorry if the formatting is off copy and paste ¯\_(ツ)_/¯)
See the Pen QWEyedJ by markpopkes (@markpopkes) on CodePen
ScrollTrigger start trigger position is off
in GSAP
Posted
Don't you just love those "aha!" moments.
Something I didn't account in my demo is that I'm using an ajax call to pull in some data and I remembered that sometimes (all the time?) you need to initiate some JS code after the AJAX finishes pulling the data you need.
So, in my real life example, I'm calling some additional functionality (mixitup, magnficPopup, etc.) and realized THAT'S where
ScrollTrigger.refresh()
needs to go.Maybe this visual will also help someone.
Consider this resolved!
I appreciate your help!