RandallHolbrook

Thank you, yes, that was it.

I didn't add any extensions that I knew of, but Edge ran an upgrade and Malwarebytes Browser Guard is running.

Turned it off, all good!

You guys are awesome

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

thanks!

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. 

Thank you, Zach!

I will implement this in my project. That is helpful, and makes a lot of sense. I could neve come up with that on my own. I look forward to joining the club when I get paid!

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

I really appreciate your time. Thank you.

if I switch one to y:-40, they animate up and down, but i would like them to fade-in up and fade-out up.

It is happening here:

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

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

 

 

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

 

 

 

Thanks, Zach

I tried using barba, the leave animation worked great, but the enter never worked. Again, I read there are issues with Oxygen builder and tried the remedies i found in those forums, but no good.

Thank you. 

Can you navigate between pages using scrolltrigger? (It appears that is what the meiomi site does ?

 

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