Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About HiLuLiT

  • Rank
  1. @ZachSaucier This was a great read, I really learned a lot I managed to reduce the Tweens code but now i'm stuck when trying to loop.. I created this function called pageAnimation and I want it to be added to the timeline for as many pages as I have (since animations are repetitive for each page). I created a new demo here but there are errors ( so i'm not sure it will help), I marked out the repetitive code, that's actually what i'm trying to create inside the function The error i'm getting is: Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[o
  2. Hey guys! So I created this demo of a gallery with GSAP & ScrollTrigger - took we a while but I got there Now i'm trying to optimize my code, since I have a monstrous function for animating elements on the timeline, and I read that this is considered to be bad practice... so maybe someone here could guide me how to create an effective loop? I tried it myself but it really messed things up... I created a demo, would appreciate any help - really trying to get better at this https://codepen.io/HiLuLiT/pen/BazMOdL
  3. Thanks for the help @ZachSaucier! I'll defiantly read some more about that and update my demo when done
  4. I found a solution thanks for this thread and thanks to @akapowl : I updated my demo for the implementation I needed... Thank you too @Hugo Priet https://codepen.io/HiLuLiT/pen/BazMOdL My next question would be then - I want to fade in/out the titles on top of each slide- how can I achieve this?
  5. i'm trying to create this demo inside a centered div https://codepen.io/GreenSock/pen/KKpLdWW I basically wrapped it with a wrapper overflow:hidden div and changed scrollTrigger's pinning to the center of the viewport, but then I completely lost the layered pinning effect... also - I only managed to center the div horizontally with margin: 0 auto, how can I center it vertically? flexbox doesn't seem to work. here's a demo - https://codepen.io/HiLuLiT/pen/BazMOdL
  6. @mikel we're almost there.... defently looks better, I update the demo: https://codepen.io/HiLuLiT/pen/OJXajjx still problem remains - I want the SVG element to be 100% width of container (grid width) and 400px height... anything I try doesn't seem to work
  7. @mikel - Sorry to bother you with this, as it turned out pretty nice, here's an updated demo - only problem is now I can't find a way to scale the svg.... any suggestions? https://codepen.io/HiLuLiT/pen/OJXajjx
  8. @mikel Thank you, I tried implementing this but i'm having a problem with scaling SVG inside a container... any suggestions? it just doesn't seem to fit my image size
  9. @mikel - I'm still getting used to Gsap & ScrollTrigger and it feels like i'm not on this level yet lol... are you familiar with a vertical demo of this effect? @akapowl - the demos could work, i will try them out... and if you can have a look when you have some time i'd love that Thank you both! I really appreciate it
  10. the example from above: https://codepen.io/GreenSock/pen/KKpLdWW
  11. Hey all, let's start from this demo that I have built - the effect i'm trying to achieve can be seen here: https://www.nightingale.world/about/ (reference just the scroll effect on the image while scrolling ) and also in this example: https://codepen.io/GreenSock/pen/KKpLdWW As you can see in my demo, I have a pinned <div> ('.slide' class) and for each pinned slide i'm applying timeline animations. i'm trying to add an animation on the images ('.img' class), but unfortunately this doesn't seem to work, the images just stack on top of each other... What am I d
  12. I appreciate your help, I will defiantly try this and show you final animations when done
  13. nope EDIT - but if you scroll back up you would expect it to behave the same way, but reversed
  14. You're right, but no - it's for a given amount of points (and always reachable in code through points.length).
  15. Unfortunately I don't have a URL to share, that's the only reference I have.... And now when you mention it - you're right, I didn't notice I wasn't animating .point elements at all... I'll give it another try. As for "set timeline with labels in between each section and then use a single ScrollTrigger to go through it. " - do you have an example for that maybe? i'm sorry i'm a bit new to this library... even a reference to read would be good... Thanks again for all your help