Jump to content

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

Search the Community

Showing results for tags 'locomotive-scroll + gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping
  2. Hello, I have an issue with the website I am creating on Elementor. The template used here has locomotive scroll, GSAP and GSAP Scroll Trigger activated. Several elements are present on this template, which are animated and working as expected. Nevertheless, I can’t find a way to add a show-hide header. I tried many different combinations. When I am editing mode I see the header, but when I go on Preview mode the header doesn’t show up. New to this type of development, I would appreciate your help. I used the CSS ID on my header, #maria-header, I completed the code CSS and the javascript below: I appreciate the time you take to read and answer me. Best, #maria-header { display: flex; position: fixed; z-index: 999; width: 100%; } <script> ;( function() { // wait until gsap & ScrollTrigger available let chck_if_gsap_loaded = setInterval( function() { if( window.gsap && window.ScrollTrigger ) { // register scrolTrigger gsap.registerPlugin( ScrollTrigger ); // ... do your thing show_hide_header(); // clear interval clearInterval( chck_if_gsap_loaded ); } }, 500 ); function show_hide_header () { const site_header = document.querySelector( "maria-header" ); const show_hide_header = gsap.from( site_header, { yPercent: -100, duration: 0,25, ease: "sine.out", } ).progress( 1 ); ScrollTrigger.create({ start: "top top-=" + 100, onUpdate: ( self ) => { if( self.direction === -1 ) show_hide_header.play(); else show_hide_header.reverse(); } }); } } )(); </script>