Jump to content


  • Posts

  • Joined

  • Last visited

nick2price's Achievements



  1. Hi all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in. Anyways, I have made a JSFiddle instead. I am hoping my issue is pretty simple, not even sure it is related to GSAP. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place. I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. I have tried giving some z-indexes, but this does not seem to make a difference. Is there any way to stop the animated image from sitting on top of section 2? Thanks
  2. nick2price

    Scale image up

    Hi all, once again apologies, it will not let me fork a codepen so I have to use https://jsfiddle.net/z69w9u4g/47/ So I am using Scroll Magic, in my example I have place a dummy section so you can see the effect. So as you scroll down, you will see that the image scales up to 1.2. This is fine, and seems to work without issues. What I am trying to do however is this. I would like to give the image an initial scale of 0.5 and then scale up to 1.2 as you scroll down. Is there any way to give the image an initial scale of 0.5? Thanks
  3. Thank you very much for the help, that is perfect.
  4. Hi all, Firstly, I hope you don't mind me using a JSFiddle, I tried to use the starter pen but it said my account was linked to spam (I was not logged in). The JSFiddle example I have is here https://jsfiddle.net/z69w9u4g/45/ I am using Scroll Magic, but my problem is more related to TweenMax. I have a lot of sections and each of them have some text on them. In my example, I done a dummy section so you can see the scroll effect. What I am after is for each block of text to fade in, whilst at the same time slightly slide up. As you can see in my example, I am kind of achieving this. However, the text is sliding up into the other section. Really, I am after a bit of advice on a couple of things. Firstly, if I remove the slide up portion of the code, you will see the natural position of the text (just at the top of the section). Really, I want all blocks of text to sit about 50-100 px below their natural position, and slide up to their natural position. Is there any way to set the starting point for this block of text? My next question relates to best practices. As I mentioned, I have a lot of blocks of text in different sections. Do I need to repeat this code for each block of text, or is there are way to make it reusable? Any advice appreciated. Thanks