Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

tomektomczuk's Achievements



  1. yes, it's doing what I need but before timeline is completed
  2. inside timeline ? gsap.timeline({ clearProps: true });
  3. 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?
  4. Ok, I managed to do it this way https://codepen.io/timovega/pen/WNoXOLQ
  5. 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
  6. https://codepen.io/timovega/pen/ZEWaQPR
  7. 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?
  8. 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); }
  9. 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?
  10. How can I do this event Click menu, change page if not a hompage and after change scroll to id?
  11. How can I pass yValue to timeline and update it every time when mediaQuery changes ?
  12. 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.
  13. 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
  14. 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?