tomektomczuk

Thank you ❤️

Sorry I have used incorrect attribute. import { gsap, ScrollTrigger } from 'gsap/all.js'; gsap.registerPlugin( ScrollTrigger ); export default class Counter { constructor() { this.timeline(); } timeline() { const counters = document.querySelectorAll( 'span.counter' ); counters.forEach( ( counter ) => { if ( counter.parentElement.getAttribute( 'data-counter-duration' ) ) { const scroll = counter.parentElement.getAttribute( 'data-counter-scroll' ); const comma = counter.parentElement.getAttribute( 'data-counter-comma' ); const tl = gsap.timeline( { paused: true, scrollTrigger: { trigger: counter, toggleActions: scroll === 'true' ? 'restart none none none' : 'play none none none', }, } ); tl.from( counter, { textContent: 0, duration: counter.parentElement.getAttribute( 'data-counter-duration' ), ease: 'power1.in', snap: { textContent: 1 }, } ); } } ); } numberWithCommas( number ) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } } How can I apply numberWithCommas so it will work like in the following example ?https://codepen.io/akapowl/pen/bGwJaqo/b2c2c56064274fd14620faa9d5537e40

Hi I have created little demo for this https://codepen.io/tomektomczuk/pen/JjZKyqJ and you can see the same result on the console. I would also like the counter to be recalculated on the scroll back

I have a counter controlled by ScrollTrigger timeline() { const counters = document.querySelectorAll( 'span.counter' ); const tl = gsap.timeline( { paused: true } ); counters.forEach( ( counter ) => { tl.from( counter, { textContent: 0, duration: counter.parentElement.getAttribute( 'data-counter-duration' ), ease: 'power1.in', snap: { textContent: 1 }, scrollTrigger: { trigger: counter, markers: true, onEnter: tl.play(), }, } ); }) } and whenever element reach the scroller-start I get Uncaught TypeError: func is not a function _callback = function _callback(self, func) { if (self.enabled) { var result = func(self); result && result.totalTime && (self.callbackAnimation = result); }

Now, this animation shows NAN for enter back

yes, it's doing what I need but before timeline is completed

inside timeline ? gsap.timeline({ clearProps: true });

Is there a way to clear all the values added to an element style (for example div style="right: value 1; top: 1 value 2") by the timeline onComplete?

Ok, I managed to do it this way https://codepen.io/timovega/pen/WNoXOLQ

Hi Guys, could you tell me how could I? activate nav.hidden_menu after scroll pass .content so when I scroll up the nav.hidden_menu will be shown and dissapear when I continue scrolling down. deactivate/hide nav.hidden_menu when I pass top of the point .content on the way back https://codepen.io/timovega/pen/WNoXOLQ

https://codepen.io/timovega/pen/ZEWaQPR

Zach this doesn't work for me

For example, How can I use Media Query to set 90,120,160 as a variable that depend on screen size? "(min-width: 1280px) and (max-width: 1919px)" gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 90}}); "(min-width: 1920px) and (max-width: 2559px)" gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 120}}); "(min-width: 2560px)" gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 160}}); Is that more clear?

Hello Everyone, how can I put a different [MEDIAQUERYVALUE] to below ScrollToPlugin function ? function menuScrollToId() { // Detect if a link's href goes to the current page function getSamePageAnchor (link) { if ( link.protocol !== window.location.protocol || link.host !== window.location.host || link.pathname !== window.location.pathname || link.search !== window.location.search ) { return false; } return link.hash; } // Scroll to a given hash, preventing the event given if there is one function scrollToHash(hash, e) { const elem = hash ? document.querySelector(hash) : false; if(elem) { if(e) e.preventDefault(); gsap.to(window, 1, {scrollTo:{y:elem, offsetY: [MEDIAQUERYVALUE]}}); } } // If a link's href is within the current page, scroll to it instead document.querySelectorAll('a[href]').forEach(a => { a.addEventListener('click', e => { scrollToHash(getSamePageAnchor(a), e); }); }); // Scroll to the element in the URL's hash on load scrollToHash(window.location.hash); }

My website menu contains: about, blog and contact. About and contact are located in a home page. Blog is located on a separate page. When I'm on a blog page and click about, I would like to a) change to home page b) scroll to #about id using scrollToPlugin. Am I now clearer?