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?

How can I do this event Click menu, change page if not a hompage and after change scroll to id?

How can I pass yValue to timeline and update it every time when mediaQuery changes ?

Chrome has the same problem. Your solution gsap.core.globals("ScrollTrigger", ScrollTrigger); after gsap.registerPlugin(ScrollTrigger); make everything works perfectly fine. Just lost few hours to find this solution.

const small = window.matchMedia("(max-width: 767px)"); const medium = window.matchMedia("(min-width: 768px) and (max-width: 991px)"); const large = window.matchMedia("(min-width: 992px) and (max-width: 1279px)"); let leftMenuWidth = function mediaQ(media) { if(small.matches) { return "37px"; } else if (medium.matches) { return "49px"; } else if (large.matches) { return "74px"; } else { // do nothing } }; I've done something like it and it's working

const tl = gsap.timeline(); const leftBackground = document.querySelector('.leftside_menu_background'); const leftIcons = document.querySelectorAll('.leftside_menu_icon_wrapper'); function leftMenuReversed() { if (jQuery('body').hasClass('home') || jQuery('body').hasClass('page-template-portfolio') ) { tl.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha: 0, scale: 1.2, y: -20}, 0.15) .fromTo(leftBackground, 0.5, {width: leftMenuWidth, ease: 'Power2.easeOut'}, {width: '0px'}, "-=0.15"); } else { // do nothing } }; I would like to set different mediaQuery values for leftMenuWidth. For example 75px for mobiles 100px for ipad and 150px for desktop. How could I do that?

Thank you Mikel, so basically I need to create a three timelines and a three eventlisteners to make it works. I have something like that function hamburgerMenu() { const hamburgerButton = document.getElementById('hamburger_menu'); const mobileMenu = document.querySelector('.main_mobile_menu'); const hamburgerWrapper = document.querySelector('.hamburger_wrapper'); const menuLinks = document.querySelectorAll('.main_mobile_menu_list_wrapper a'); const twelveBackground = document.querySelector('.main_menu_background svg'); const leftIcons = document.querySelectorAll('.leftside_menu_icon_wrapper'); const leftMenu = document.querySelector('.leftside_menu_background'); const tlHamburger = gsap.timeline({paused: true, reversed: true}); // Based on _flexboxgrid.scss values const small = window.matchMedia("(min-width: 320px) and (max-width: 767px)"); const medium = window.matchMedia("(min-width: 768px) and (max-width: 991px)"); const large = window.matchMedia("(min-width: 992px) and (max-width: 1279px)"); const xlarge = window.matchMedia("(min-width: 1280px) and (max-width: 1919px)"); const xxlarge = window.matchMedia("(min-width: 1920px)"); var smallListener = function(e){ if(e.matches){ tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15) .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '7px', rotation: -45}) .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '7px', rotation: 45},"-=0.3") .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-37px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3") .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'}) .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () { mobileMenu.style.pointerEvents = "auto"; }}) .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5"); } }; var mediumListener = function(e){ if(e.matches){ tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15) .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '7px', rotation: -45}) .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '7px', rotation: 45},"-=0.3") .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-49px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3") .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'}) .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () { mobileMenu.style.pointerEvents = "auto"; }}) .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5"); } }; var largeListener = function(e){ if(e.matches){ tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15) .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '10px', rotation: -45}) .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '10px', rotation: 45},"-=0.3") .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-73.5px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3") .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'}) .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () { mobileMenu.style.pointerEvents = "auto"; }}) .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5"); } }; //Add the listener to MediaQueryList small.addListener(smallListener); medium.addListener(mediumListener); large.addListener(largeListener); // Initialise onload smallListener(small); mediumListener(medium); largeListener(large); // Allow Hamburger Button to run animation in full hamburgerButton.addEventListener('click', (e) =>{ if(tlHamburger.isActive()) { e.preventDefault(); e.stopImmediatePropagation(); return false; } else { toggleMenu(tlHamburger); } }); // Allow animation to play reverse function toggleMenu(tween) { tween.reversed() ? tween.play() : tween.reverse() ; }; };

Hi I have a timeline where "to" left position is different depending on widows size (mobile: -37px, ipad: -49px, ipad pro: -74px) tl.xxxxxx .fromTo(hamburgerWrapper.children[1], 1, {left: '0'}, {left: '-37px'} .yyyy how can I make it work?