Jump to content
GreenSock

MohammedLR

Simple titles pin scrolltrigger animation

Recommended Posts

Hello! 
I'm new to GSAP and kind of a stranger to code. I'm struggling a little bit trying to achieve a basic animation, so I'm hoping someone in this forum could help me!
I'm looking to achieve a very simple effect: I have two titles pinned and I want the first one to fade out in the same exact moment that the second title appears. In order to do so I have generated an invisible container that works as a trigger. When it enters the viewport, the animation occurs. So far I've managed to get here, but no matter what number I specify for duration, the titles appear immediately, with no transition at all.

Any idea why this is occuring? Thanks!

See the Pen gOGdMYa by cacabla (@cacabla) on CodePen

Link to comment
Share on other sites

Hey there!

 

Are you looking for something like this? Using a timeline is a good way to create sequenced animations. Hope this helps.

 

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

 

 

  • Like 3
Link to comment
Share on other sites

Thanks! That looks great. For some reason the codepen you sent doesn't work for me but changing the JS trigger it did! I also added a short delay to avoid them overlapping and some Y movement.
Just one quick question, how would you add a third element? I tried copying the ".from(".texto2"..." block and it didn't work.

See the Pen RwLYazw by cacabla (@cacabla) on CodePen

Link to comment
Share on other sites

I've simplified the demo down a bit for you as some CSS/structure was getting in the way a little.

Does it make a bit more sense?

 

  • Like 1
Link to comment
Share on other sites

Amazing! Thank you very much :)

  • Like 1
Link to comment
Share on other sites

Okey! Almost there, just one minor adjustment.
Is there any way to increase the time that the 2 title appears? As soon as it appears it fades out. Thank you so much!

See the Pen jOGvMZo by cacabla (@cacabla) on CodePen

Link to comment
Share on other sites

Sure, you can change the timings by adjusting the positioning of the tweens or their durations like this...
 

// default tween duration is 0.5 seconds
tl.to(".header1", {
  opacity: 1,
  y: -30,
},0)
.to(".header1", {
  opacity: 0,
  y: -60,
},3)
.to(".header2", {
  opacity: 1,
  y: -30,
  delay: 1,
},3)
.to(".header2", {
  opacity: 0,
  y: -60,
},6)
.to(".header3", {
  opacity: 1,
  y: -30,
  delay: 1,
},6)

The timeline is tied to the scroll distance - so think of duration as a ratio.

if you have two tweens, both with a 1 second duration and they have a 2 second gap in between, the gap will last 1/2 of the scroll distance and each tween will last 1/4 of the scroll distance.

 

tl.to(".header1", {
  opacity: 1,
  y: -30,
  duration: 1
})
.to(".header1", {
  opacity: 0,
  y: -60,
  duration: 1
},"+=2")

 

|-----------------------distance scrolled---------------------------|
|-----tween 1-----||------------gap------------||-----tween 2-----|

 

To understand the position parameter and timelines - 

 

Also a small note - when making a codepen demo you don't need to put all the head and scripts and everything in the HTMl panel. Just the content that would go in the body element (like I did in the demo I linked you to)

  • Like 3
Link to comment
Share on other sites

Thanks! I adjusted the duration and I'm pretty happy with the result. 
To finish off... I wanted the animation to occur at the same time that you scrolled through the page and right now the background is completely static.
Not only it is static, but also it is not showing the whole page. It seems that the JS is cropping the page height, because when I open the HTML without it I can see the full background image.
https://streamable.com/ib8ul4

Link to comment
Share on other sites

Sorry I don't understand the question. Could you rephrase it and possibly link to a demo?

 

Thanks!

Link to comment
Share on other sites

Sorry, let me try that again. The animation works like a charm, but the background image does not move.
What I am trying to achieve is: scrolling down unveils progressively the rest of the background image just as it happens with any common static web page + having the scrollTrigger titles animation happening at the same time.

Right now the scrollTrigger is happening but the background remains exactly the same. 
Here's the codepen, but I think that it is easier to understand in my previous video.

See the Pen XWePBMx by cacabla (@cacabla) on CodePen



Thanks again!

Link to comment
Share on other sites

Heya,

 

The problems you're facing here are more related to CSS and I'm afraid it's a bit out of the scope of these forums to offer help with styling and general coding issues. 

 

Some pointers: 


As I mentioned - only the elements from inside the body tag need to be in the HTML section of your codepen.

It's also really not ideal to be positioning elements absolutely with fixed pixel values like you are without media queries, it won't work across a range of different devices. I personally can't see your text because my screen is too small and it's right offscreen to the right.

 

.header1 {
  top: 565px;
  left: 1014px;
}

 

Here's a simplified example - hopefully this is a bit closer to what you need.

See the Pen NWaLBYa?editors=0110 by GreenSock (@GreenSock) on CodePen


I'm afraid we can't offer any more CSS help here, but this is a great resource for nailing down the basics. - 
https://web.dev/learn/css/

  • Like 2
Link to comment
Share on other sites

On 1/8/2022 at 6:24 PM, Cassie said:

Hey there!

 

Are you looking for something like this? Using a timeline is a good way to create sequenced animations. Hope this helps.

 

 

 

 

 

Hey @Cassie

 

Thanks loads for this example, been a great jump-off point for my desired effect too. Quite pleased with myself that I managed to find and use 'SteppedEase' in the docs as I didn't want the fade.

 

What I'm trying to achieve is for the first word to appear on load, pinned and visible in the centre of the page, and then words two and three scroll into view in sequence.

 

Thinking it's a fairly simple case of setting the pins, but my foggy brain not quite able to work out the best approach?

 

See the Pen BawGvqJ by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

52 minutes ago, Mattrudd said:

What I'm trying to achieve is for the first word to appear on load, pinned and visible in the centre of the page, and then words two and three scroll into view in sequence.

 

It's not clear to me what your goal is here, like what does "scroll into view in sequence" mean? There are lots of ways things could scroll into view (from bottom? Right?) and what happens to the text that's already there? 

 

Here's my advice: just make an animation that does what you want FIRST - don't tie it to the scroll position at all. Just let it play. Once you're happy, THEN wire it up to the scroll position. :)

Link to comment
Share on other sites

OK - thanks @GreenSock - understand why sorting the tweens first would be a help, thanks for the advice!

 

Apologies for my unclear explanation - I'm essentially looking to replicate the title here, where 'ASK' starts in view, static, to be replaced by 'FOR' on scroll, and so on.

 

So to replicate that, I tweaked Cassie's example to replace the words on scroll... so it's the beginning I'm looking to match with this example - in my case the word 'One' being visible on load and then the sequence begins on scroll.

 

Clumsy use of the phrase 'scroll into view' - was thinking in markers!

 

I'll go back a few steps and get the timeline right first!

 

Thanks as ever.

Link to comment
Share on other sites

Ah, okay. Here's how I'd do it: 

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

 

Of course you could manually add a .to()/.set() to your timeline for each text element but I'm trained to look for repetitive code and avoid it whenever possible, so I opted for a loop. That has two benefits: 

  1. You could easily add more ".text" elements in your markup and the code would automatically adjust  - no need to go in and add more code for each one. 
  2. There's one place where the animation code exists for all those elements, so it's super simple to tweak. For example, if you wanted to change the timing or add a fade or whatever, instead of copying and pasting and editing a bunch of lines of animation code, you just do it in one spot. Done. 

I used autoAlpha instead of opacity so that it set visibility: hidden too - that improves performance because the browser doesn't have to worry about rendering those elements and they don't allow interaction with the mouse (like dragging to highlight text). 

 

Lastly, there's no need for a step(1) ease. You're simply toggling visibility, so you can use a .set() instead of a .to(). 

 

Make sense? 

Link to comment
Share on other sites

10 hours ago, GreenSock said:

Ah, okay. Here's how I'd do it: 

 

 

Make sense? 

 

Total sense, thank you!

 

Feels like the library's really starting to open up to me, and I'm beginning to connect more dots (thanks to the patience and kindness of this forum, especially with a code noob like myself). Grateful!

 

GSAP is very clever! 🙌

 

  • Like 1
Link to comment
Share on other sites

Glad to hear it, @Mattrudd! Good luck on your learning adventures. 

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.
×