Jump to content
Search Community

TrulyNewbie

Premium

  • Posts

    78

  • Joined

  • Last visited

 Content Type 

Posts posted by TrulyNewbie

    Infinite scrolling elements - simplified version

    in GSAP

    Posted

    On 1/30/2023 at 11:24 PM, GreenSock said:

    There are quite a few ways to do that. Here's one that uses an Observer to respond to wheel/touch/pointer events: 

     

     

     

    Is that sorta what you're looking for? 

    Hi I tried to make this vertical, I changed all the Xpercent to Ypercent. but it didnt quite work. Is there more work to it than that?

     

    Flip issue

    in GSAP

    Posted

    Thank you so much for pointing that out!

     

    My idea was that the two words are stacked, and as you scroll they scale down ad go side by side. So I've tried to code it myself, and i removed the button and I think I'm close. But somethings not right. The triggers dont work correctly. 

    Sorry to pester you with questions

     

    See the Pen poxpxMw by NewbieRuby (@NewbieRuby) on CodePen

     

    Flip issue

    in GSAP

    Posted

    Hi,

    I have an issue where I the container holding the flip changes height on flip change. Is there a way I can have the div not change height?

    My other issue is that when you click the button the flip happens, the height changes (which I dont want to happen) and then when you click the button again its like theres a delay in undoing the flip

     

    Thak you for your help

    See the Pen eYPyEJw by NewbieRuby (@NewbieRuby) on CodePen

    Have things changed?

    in GSAP

    Posted

    I see! Thank you Rodrigo! My mistake!

    For anyone else who may have this issue. I made GSAP a dependency on my custom js file, but I also needed to make JQUERY a dependancy too. 

     

    from: 

    wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true );

    to:  

    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js', array(), null, true);

wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('jquery', 'gsap-js'), false, true );

     

    • Thanks 1

    Have things changed?

    in GSAP

    Posted

    My functions.php

    // The proper way to enqueue GSAP script in WordPress
     
    // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    function theme_gsap_script(){
    // The core GSAP library
     
     
    wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true );
    wp_enqueue_script( 'gsap-scrl2', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollToPlugin.min.js', array('gsap-js'), false, true );
    // Your animation code file - with gsap.js passed as a dependency
    wp_enqueue_script( 'gsap-ss', get_template_directory_uri() . '/js/ScrollSmoother.min.js', array('gsap-js'), false, true );
    wp_enqueue_script( 'gsap-mrph', get_template_directory_uri() . '/js/MorphSVGPlugin.min.js' , array('gsap-js'), false, true );
    wp_enqueue_script( 'gsap-splt', get_template_directory_uri() . '/js/SplitText.min.js', array('gsap-js'), false, true );
    wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );


     
    add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' );
    function themeprefix_slick_enqueue_scripts_styles() {
     
    wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );
    wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
    }

    Have things changed?

    in GSAP

    Posted

    Hi, I've built all my wordpress websites using GSAP using the exact same 'layout' of code.

    But recently when I began to use  3.11.3 as opposed to 3.10.3 I keep getting messages saying "$ is not a function". 

     

    I've set up my codepen exactly how my site is.

    Is this a wordpress thing or GSAP thing or a me thing?

     

     

    Thank you for your help

    See the Pen GRYRMmd by NewbieRuby (@NewbieRuby) on CodePen

    Correct term

    in GSAP

    Posted

    Hi, I remember skimming over something that said that theres a function or something of that sort, that finalises tweens if they're quickly scrolled past?

    Could some one please remind me of the correct term please. 

     

    Thanks

    ScrollTrigger refresh

    in GSAP

    Posted

    1 hour ago, GreenSock said:

    I'm struggling to understand why you would use a position: fixed element as a trigger. It doesn't scroll with the page, so what would you expect it to do in terms of triggering? 

     

    When you do a ScrollTrigger.refresh(), it of course re-calculates all the start/end positions but in the scenario you described, you've already scrolled down but the position: fixed container doesn't move, of course, so now the start/end would be calculated according to that position. 

     

    If you want it to trigger at the very top of the page, just give it a numeric value like start: 0 or start: 1 which is absolute. No need for a trigger at all. 

     

     

     

     

    And why were you setting the height to something invalid like this?: 

    container.style.height = ScrollTrigger.refresh()

     

    Thank you for your help. I didn't consider that a fixed element could not be a trigger . Thanks

     

    And - "And why were you setting the height to something invalid like this?:" That was an accident, I was playing around with ideas and must've accidentally hit save.

    ScrollTrigger refresh

    in GSAP

    Posted

    Hi, on my website, I have a slider that changes height, so when it's clicked the footer is cut off. So I made a small demo.

     

    When I click the button, the fixed .box in the background scroll triggers reset. So it fades back in.

    How can I make it so it when I click the button that triggers the ScrollTrigger refresh,  the .box div isn't affected?

     

    I've tried, toggleActions, and invalidateOnRefresh: false

     

    Thank you for any help

    See the Pen OJQrZbm by NewbieRuby (@NewbieRuby) on CodePen

    Scroll back to reset

    in GSAP

    Posted

    58 minutes ago, akapowl said:

    Hello @TrulyNewbie

     

    That sounds and looks to me like you want to do something very similar to what was asked in the thread linked below. @GreenSock forged (or in other words, he whipped together :D) a neat solution for that. Maybe have a look and see if that will help you.

     

     

     

    Thanks, I tried that a few days ago, but I couldn't figure out how to add the roatation

    Scroll back to reset

    in GSAP

    Posted

    Hi, I tried to figure it out on my own but I'm stuck.

     

    The first two parts of my animation work how I want it to, but the last part doesnt.

    When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving

    And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again.

     

    I've tried:

    1. overwrite: "auto",

    2. rotatesletters.pause()

    3. functions

     

    I've also rewritten the code four different ways

     

    I appreciate any help. 

    Thank you

     

    See the Pen abqRQQg by NewbieRuby (@NewbieRuby) on CodePen

    Scroll to different page

    in GSAP

    Posted

    1 hour ago, OSUblake said:

    We really can't help without a minimal demo. You can use CodeSandbox to show the issue. Just fork this and add another page and your code.

     

    https://codesandbox.io/s/reverent-vaughan-5pw6zt?file=/main.js

    I've never made a sandbox before! Thanks for showing me

    https://codesandbox.io/s/nice-kapitsa-e0uodo?file=/index.html

    So this is work exactly like how I mentioned. When you click the external button, on the about page, theres a huge gap at the bottom, and you cant scroll to the top of the page to see the text. It also doesnt load at the top of div #

     

    Thanks again

    Scroll to different page

    in GSAP

    Posted

    That's what I was trying to explain. The demo couldn't show the issue, because the issue only appears when you click a link to scroll to a section on another page.

    E.g You are on this page: https://new.com/ and then you click a button that brings you to - https://new.com/about#approach

    But when you load in you can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom

    Scroll to different page

    in GSAP

    Posted

    Hi, thanks for your help, I've tried the codes but it doesn't fix the issue.

     

    The page loads at the top of the anchor, but I cant scroll above it, and beneath it is the footer and a huge gap

    Scroll to different page

    in GSAP

    Posted

    43 minutes ago, GreenSock said:

    Hi @TrulyNewbie. It's virtually impossible for us to troubleshoot blind - could you please provide a minimal demo in CodeSandbox or CodePen? It doesn't need to be your actual project - literally just a few colored <div> elements is fine. 

     

    Also, please make sure you've got the latest version of ScrollTrigger (3.10.3 right now). There was a regression in a recent patch that might have caused the problem you were describing but again, it's hard to know without seeing the issue in context. 

    Sorry about that, I thought because the link was external it might be pointless to show.

     

    So when I click "internal" It scrolls down, but when I click "external" on my Wordpress site, I have the issues mentioned above.

    See the Pen gOoQrLx by NewbieRuby (@NewbieRuby) on CodePen

     

    Scroll to different page

    in GSAP

    Posted

    Hi, I don't think it's possible to create a CodePen.

     I have a smoother scroll enabled, and When I click a link e.g (Ruby.com/about#me), it scrolls to the anchor, but the page is messed up. You can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom. 

    I've tried to use scrollTrigger.update/refresh but to no avail.

     

    Thanks again!

      

    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();
  // Scroll to the element in the URL's hash on load
 gsap.to(window, {scrollTo: elem}); 
  }
    
}

// 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), console.log("click and scrolled");
  });
});

// Scroll to the element in the URL's hash on load
scrollToHash(window.location.hash);

     

    Locomotive to ScrollSmoother

    in GSAP

    Posted

    1 hour ago, Cassie said:

    Maybe ScrollTrigger.refresh() ?

    Thank you. That works! 

     

    But what about:

     

    window.addEventListener('load', (event) => {
     locoScroll.stop()
    });

    function goAhead() {
    locoScroll.start(); 
    }
    }});

     

    How can I replicate this?

1
2
3
...
4
Page 1 of 4  
×
×
  • Create New...