jillianadriana

Yes, you nailed it! Ok, time to sign up for Club Greensock.

Now you have me questioning my design, haha. You are almost correct except the shrinking has nothing to do with 100px. Basically it goes from being centred in that right column to shrinking into the typical logo position on scroll. When you scroll back up, the logo goes back to that middle spot. A. Full screen hero / starting point: B. The next sections below the top section/hero: Does that make sense? I forgot that I ended up removing that line of text from the right column and gave it its own section, so hopefully that helps with some of your confusion. Is Flip also useful for animating flexbox elements with ScrollTrigger? I have been playing around on Codepen and when I try to pin flexbox divs, they don't work very well because of the whole absolute/fixed position thing. I was also trying to see if I could get some sections to fade in while others did other things and it was just a disaster. I am having fun learning and trying to figure all of this out! playing around on CodePen

I truly appreciate that, magic Greensock man! Actually, I just realized your avatar says Jack. Thanks, Jack!

The starting position for the logo is above the text that says "I tell compelling stories..." and then it shrinks to the top left corner on scroll.

Just wanted to follow up. Does anyone have any advice or tips? I guess I will keep playing around with it.

Hey friendly GSAP folks, I am following this CodePen to create a logo that shrinks and pins on scroll but I can't get the starting position and size to be where/what I want. The goal is for it to begin at full size, or at least 100% of the width of the right column, just above the line of text. And then on scroll it shrinks to the top left. Should I put it in the right column div? Is that where the issue is? I had tried that previously but wasn't able to get it to go to the top left corner of the screen, just the top left of the column it was in.

Follow up -- how to disable this custom cursor on mobile? Is that possible?

Yes, I was actually thinking if I can just use GSAP for everything, that would be even better. So I appreciate this guidance.

Thank you, maybe I will give that example a try. I appreciate your time and help!

Thanks, Blake. I was able to recreate your pen and it all makes sense to me, however I can't get it to work with Locomotive Scroll... https://codepen.io/jillianadriana/pen/eYvXXYy

Hey friends, I am working on some wavy text inspired by this effect: https://codepen.io/jillianadriana/pen/VwpOeaL I am using Locomotive Scroll for the page I'm working on, which I'm assuming is why the vanilla JS version won't work as-is, so I'm attempting to build a GSAP version. I have searched and searched and have tried to piece together a solution but obviously it isn't working the way I'd like. I spent most of my weekend on this and I have decided to just come ask for help directly. I have used snippets of code pulled from various threads here and I've watched most of Carl's videos in Creative Coding Club, but I do have learning disabilities, so things just don't stick in my brain as well as I wish they would. That's why I tend to learn by doing, and I end up having to do things over and over and over before I finally get the hang of it. I say all of that to explain that I am not looking for shortcuts or someone to do the work for me. I am trying my best J

Praise be, thank you kindly, akapowl!

Actually, can anyone help me figure out why the cursor isn't sticking to its position when I scroll down the page/move it down?

You are right, I don't want it over the white space. Thanks for that heads up!

Thank you both so much for your help. Still learning all this stuff, so I appreciate the guidance!

I am trying to create a custom cursor for a blog post page where the cursor goes from default to a custom "read" label when hovered over the blog posts (ie - the featured image or blog post title). I have been unable to get it to work on multiple posts, and when it does show up, the positioning goes off if you scroll down/move the mouse down the page and then move the mouse back up. I realize this might be a JS issue but I am unsure, so I wanted to throw it out here to see if I can get some help if it is indeed a GSAP issue.