tomektomczuk
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by tomektomczuk
-
-
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 ?
See the Pen b2c2c56064274fd14620faa9d5537e40 by akapowl (@akapowl) on CodePen
-
Hi I have created little demo for this
See the Pen JjZKyqJ by tomektomczuk (@tomektomczuk) on CodePen
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 });
-
On 10/14/2020 at 7:28 PM, GreenSock said:
It sorta depends what you mean by "original state".
Option 1:
... onComplete: function() { this.time(0).kill(); }
This retains inline CSS, but returns things visually to the initial state. Basically it just rewinds the animation to its initial state and then kills it.
Option 2:
// in your tween(s) ... clearProps: "all"
Wipes out any inline CSS. Not sure if that's what you want or not.
Option 3:
let state = captureState(".class, #id"); let tl = gsap.timeline({ onComplete: () => revertState(state)}); // record the current inline styles of all the elements passed in function captureState(elements) { let state = []; gsap.utils.toArray(elements).forEach(element => state.push(element, element.style.cssText)); return state; } // revert the inline styles function revertState(state) { for (let i = 0; i < state.length; i+=2) { state[i].style.cssText = state[i+1]; } }
This captures the inline styles of the elements before the animation, and then reverts to those afterwards. It's slightly more complicated, but allows you to keep the inline styles that predated the animation.
Does that help?
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?
-
-
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
See the Pen WNoXOLQ by timovega (@timovega) on CodePen
-
-
2 hours ago, ZachSaucier said:
Use a function:
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: () => { // Lots of ways of doing it in the function - using innerWidth or matchMedia // just make sure to return the value you need for the given viewport // for example return innerWidth < 2560 ? innerWidth < 1920 ? innerWidth < 1280 ? 0 : 90 : 120 : 160 }}});
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?
-
-
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.
-
1
-
-
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
-
2
-
1
-
-
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?
If you'd like help debugging please make a minimal demo.
Counter controlled by ScrollTrigger (Uncaught TypeError: func is not a function)
in GSAP
Posted
Thank you ❤️