Jump to content
Search Community

Pinning text in column using Oxygen

Pete G test
Moderator Tag

Recommended Posts

Hi there,

I'm very new to using GSAP so forgive if this all looks a little basic.

I have followed a ton of videos, more especially these:
https://www.youtube.com/watch?v=FH0B3Gdm0P0&ab_channel=TheCodeCreative&fbclid=IwAR04hfqGn4cCVqbE5QICgDUY4EXX6oKRD6Gt7tqUZ2QweL75GGVQnlqNhzA

I use Oxygen and wishing to pin a text block in a div. If I use the code below it works fairy well however;

Is there a way of setting the end so the text block bottom, stops at the end of the column?
I set end to 700 and sure it works, but on mobile devices the columns are smaller so this breaks.

I have tried all kinds to overcome this, I guess I'm missing something obvious...hopefully.

Any thoughts would be great :)

gsap.to("#div_block-2009-153", {
        scrollTrigger: {
        trigger: "#text_block-1902-153",
        start: "top 20%",
        end: "700 10%",
        markers: true,
        pin: "#text_block-1902-153"
        }
});

aa plz see 12.jpg

Link to comment
Share on other sites

Hey Pete and welcome to the GreenSock forums.

 

If all you want is for this element to be sticky on scroll, there's a possibility that you don't need ScrollTrigger at all. You might be better served with just position: sticky in CSS.

 

With that being said, if you're doing something more complicated like scrubbing through an animation then ScrollTrigger is the way to go :) As for your question of how to get it to stop at the end of the column, the answer is that you need to set the end value correctly. Perhaps end: "bottom bottom" would do that trick? It's impossible for us to tell exactly what that end value should be based on a picture like you shared. If you need additional code help, could you please create a minimal demo of the situation using something like CodePen?

  • Like 1
Link to comment
Share on other sites

Hi there Zach,
Thanks very much for your reply. The reason I am trying to use GSAP is, as with HTML, I have been using builders for years, I used to be able to build using Dream Weaver in its early days. Now using Oxygen attempting to expand my knowledge.

My HTML isn't great however, this demonstrates very roughly the issue:

See the Pen qBaJqNw by PeteNorfolk (@PeteNorfolk) on CodePen



HI have a column on the right, in local, that's an image. On the right a text block.
This I am trying, as you said to make sticky, but would prefer to use GSAP, I have the time and wish to use other scroll effects if I can get my head round it.

At the very beginning of this video, is what we are trying to do....BASIC Agency.

I tried end: "bottom bottom" and this didn't work.

Again, thank you for the welcome and response.

 


 

Link to comment
Share on other sites

Hi @Pete G you where missing some scripts in your Javascript tab, you need to load GSAP and ScrollTrigger before you can use them in Codepen.io 

 

I've tweaked your pen a bit to make it work how the video explains it. I've there for removed you're floats, because I think GSAP doesn't like floating elements, also as a beginner I would stay far away from anything float based. Take a look at Flexbox and CSS Grid (https://flexboxfroggy.com and https://cssgridgarden.com) these are just much easier to create and maintain.

 

See the Pen ZEpqLWN by mvaneijgen (@mvaneijgen) on CodePen

 

I don't want to discourage you from using awesome tools like GSAP, but maybe you should first look in to some basic HTML and CSS before you dive in the deep and with animations.

  • Like 2
Link to comment
Share on other sites

Thanks for the demo, that shows your issues quite clearly.

 

In addition to what mvaneijgen said, your selectors are wrong. You're trying to select elements with a class of p instead of the p element. Perhaps it'd help to learn more about element selection?

 

You also don't need the tween, toggleActions, or an ID. I'd also use the left column as the endTrigger. Here's how I'd set it up, using his demo as a start:

See the Pen GRjYrzB?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you both for your feedback. Decided to bin this. My bad and rushed attempt at adding an example here probably made things less clear than they were.

Using Oxygen is pretty straight forward however trying to add a little creativity is proving 'far more trouble' than it's worth.
Frustrating to say the least.

I do however appreciate your time and suggestions. Time to forget GSAP for the time being.

Take care.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...