Jump to content
Search Community

RandallHolbrook

Members
  • Posts

    12
  • Joined

  • Last visited

Posts posted by RandallHolbrook

  1. I use autoAlpha on pages a lot for a fade-in effect, so when that doesn't work the page content never displays.

    I have found this problem only on the MS Edge browser, It appears Chrome and Firefox are working fine.

    These are a couple pages that are affected:

    Web Design & Development Portfolio - Randall Holbrook Art & Design (rndl.design)
    Adventure - underlaguna.com

    Sea Wave Wines - Life's a Wave - Catch It!

    I don't have a demo, but basically they are wordpress sites, and no GSAP animations are working.
    I am loading the CDN with Advanced Scripts by Clean Plugins.

    Any help or insight is greatly appreciated

  2. 18 hours ago, ZachSaucier said:

    You're re-using the same variable name (tl) when you should either not using variables (they're unnecessary in this case) or name them different things.

    This was copied from one of the videos with the "Freds". Do I just use .to or .from and drop the tl?

    Also, help me to understand what "overwrite" does in:

    gsap.defaults({overwrite: 'auto', duration: 1}); 

    I couldn't find it in docs. 

  3. Hi I am new to GSAP (not great at JavaScript to begin with)

    Client wants to mimic the scrolling effect (fade-in/fadeout) of sections/pages on https://meiomi.com/.

    No eCommerce, etc. I am using Oxygen Builder for layout. I have been struggling with getting GSAP and barba.js to work correctly.

    I am looking for a mentor to look at what I am doing and show me what I am doing wrong. I have a few hundred dollars I am willing to split off of what I quoted.

    The site is to go live Feb 12. 

    Thank you,

    This is as far as I have gotten:

    See the Pen LYRobjx by RNDL (@RNDL) on CodePen

  4. OK, here is a simple ask, how do I make the h1 leave and enter moving in the same direction?

    tl.to("h1", {y:40, autoAlpha: 0, duration:.4});

    tl.to("h1", {y:40, autoAlpha: 1, duration:.4});

    they cancel each other out.

    I really have read the getting started, watched videos, did Carls' course. I think the pen I picked as a starting point is a bit above my JS skills, which was never one of my strong points. Thanks

     

     

  5. Hi Zach (and other helpful coders),

    Where ( and how?)  would I create a timeline to include the h1 in this pen? As stated above, I need to animate the page content (like the h1 in this instance)

    like the x transition here, and then slide out before the section fades out. as it is,  can scroll by the h1 animation quickly and stop it from ever playing again so i think the triggerActions is in the wrong place. I really appreciate ELI5 help!

     

    Am I heading in the right direction? updated pen:

    See the Pen LYRobjx?editors=0010 by RNDL (@RNDL) on CodePen

     

     

     

  6. Hi all, I am new to GSAP and scrolltrigger,

    I may have bitten off more than I can chew. I told a client i could mimic the way the sections fade in and out on this page: https://meiomi.com/wines.

    I found "Looped "Scrolling" Section Transitions - ScrollTrigger" at 

    See the Pen ZEpRKbZ by RNDL (@RNDL) on CodePen

    , thinking it was pretty close, as it opens sections without visually scrolling, but I need  to animate the section content as well. I have a lot of questions. Is anybody willing to do a consultation with me to see what can and can't be done? 

    A few things:

    I am planning on building the site with Oxygen page builder. I have a sandbox here: Seven Rings - Sandbox (randallholbrook.com)

    The content slowly disappears after a few scrolls, a blank section is created if I apply a footer to the page.

    Content on the second section doesn't animate (or show). The content is animating out, where I would just like a fade.

    I have been poring over the docs, did a snrkl.tv course, and watching lots of tutorials, but I am not quite getting the gist of combining the disparate parts into a whole.

    Thank you in advance for your help!

     

     

     

     

    See the Pen zYKaoBY by RNDL (@RNDL) on CodePen

×
×
  • Create New...