Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About Christiemade

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I haven't been able to get it to work at all.... but I can get a structure set up for you. https://codepen.io/christiemade/pen/KKWyRvV
  2. Say I have some text that stays fixed on the screen. I want multiple thing to happen to it as the user is scrolling. The divs that appear scrolling behind it are the triggers. I want to change things on the text like color and opacity. As Div #2 scrolls into view, the opacity changes from 0 to 1. As div #4 scrolls into view, the color changes from black to white. Do I need to create two different effects to do this?
  3. Derp! Thank you! I would like to try converting to a timeline, as I think that makes the most sense, but I'm not sure where to put the different triggers. gsap.timeline({ scrollTrigger: { trigger: '.section02', scrub: true } }) .to('#img_2', { opacity: 1 }) .to('#img_2', { opacity: 0 }); Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers? 🤔
  4. I am trying to figure out why my slides don't fade out nicely all the time. (Sometimes they do). In the example, #img_2 does not fade out, it just abruptly cuts away. (Code that should fade it out starts at line 21)
  5. Nevermind, it looks like maybe I did figure it out Thanks for your help!
  6. I am not clear how to use a timeline and also specify specific div positions....? It may not always be exactly the length of a section, it needs to be able to be specified precisely per animation. So, for example, if I wanted one of the zooms to start when section 3 was halfway up (top center) and end when section 4 was rolled through (bottom top), how would I do that? https://codepen.io/christiemade/pen/wvgRgmz
  7. I am just trying to, in this example, get this image to animate (zoom in) as you scroll down, but then also zoom back out when you scroll up. I also want the zoom to take exactly as long as it takes to scroll through section 3 to start and complete its animation. I put endTrigger: '.section4', In the code to tell it when to finish animating.
  8. When I add an EndTrigger, it stops animating when reversed.
  9. I do want the image to by default (when not zooming) be scaled to fit the screen (Width/height) - which is a lot easier to do when its a background image. So using this method I still have to add a bunch more code to do that part as well. Also, I do need it to be able to stop/end at very specific positions, too. Not just at each section. 🤔
  10. My actual project is much more complicated, so I used the CodePen from another project just to speed up my making a simple example of what I am trying to do I think I can work with this, thanks!
  11. I know I am doing this wrong I want to be able to target and change the zoom level of the #target div multiple different ways throughout the users scroll. How can I clean this up (and make it work?) Right now the second animation doesn't even animate, it just jumps.
  12. What if you want it to be sticky across multiple divs, but also be able to reverse back up and stick then, too? (Section 2 stays sticky through section 3) https://codepen.io/christiemade/pen/eYgPQRL?editors=1111
  13. If I wanted the fade to last the length of two separate divs, would I need to use timeline for that? Let's say we're animating something that is fixed over on the side of the screen. We want it to start to change opacity when div #2 comes into view, but not finish until div #4 comes into view (so its still animating all the way through div #3)