Jump to content


  • Posts

  • Joined

  • Last visited

About warkentien2

  • Birthday 04/29/1988

Profile Information

  • Gender
  • Interests
    Web Animation, React, VanillaJS, Design System, Digital Art, Movies

Recent Profile Visitors

1,804 profile views

warkentien2's Achievements

  1. Hi Kamran, This level of 3D rendering – with scattered glowing lights – and animation is nearly or completely impossible for web browsers. A straightforward solution would be to use hi-res videos for the background/layers. Would you have this animation without the buttons/text? How would this look on different screen sizes?
  2. I understand now. Sliders are tricky. There are plenty of working sliders with this feature. E.g.: Slick see "Variable Width." If you're making your own slider, you might wan't to make it draggable, scrollable, scrollable with "snap into center", and with arrow and dot navigation. Depending on your needs the approach will be different. And it'll take a couple of days to get it just right.
  3. Hi @pietM, Both `.slides-container` and `.slides-inner` are set to 100% of the viewport. Their widths are not changing. So do you wish to know the sum of all slides width or just the width of each slide individually?
  4. Hi Manil, Since you are looking for freelancers (plural), I'll volunteer as well. I've sent you a direct message. Regards,
  5. Hi Matthew, I've sent you a direct message. Regards, Philip
  6. Hi @Kamran Are you still looking for help? I've sent you a direct message. Regards, Philip
  7. Hi Vicki, Landing page looking great! I've. sent you an email. Regards, Philip
  8. @OSUblake Good point, tested it here: gsap.ticker.add(stage.update.bind(stage)); Works. https://codepen.io/warkentien2/pen/MWpKEaP
  9. @Cassie , no problem. Let me explain The gsap v3 docs for Easel https://greensock.com/docs/v3/Plugins/EaselPlugin has the following segment: //setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick gsap.ticker.addEventListener("tick", stage.update, stage); stage.update(); If we try to run it, it doesn't work. Why? The solution is on this other gsap v3 doc page. https://greensock.com/docs/v3/GSAP/gsap.ticker Which I only found the connection via this post. After googling for a while. I only asked for a code snippet update to properly reflect v3's notation. Also, I'm asking on this thread since I didn't find a better place to request documentation updates. The opacity solution can be ignored. I figure the tintAmount prop on the code snippet does the same.
  10. @ZachSaucier it took me a few hours to find this info. Could someone update the docs? https://greensock.com/docs/v3/Plugins/EaselPlugin Maybe also throw in a `easel: { alpha: 0 }` line in there to replace opacity. I figure most people will start connecting easel + gsap using this tutorial https://createjs.com/getting-started/easeljs Thanks!
  11. Hi Vadbiz, This is definitely something for gsap's ScrollTrigger (https://greensock.com/scrolltrigger/) You might want to fine tune it with gsap's Innertia (https://greensock.com/inertia/) Key words to look for: - scroll vertical snap into sections - parallax And for the main hero, you'll need to animate a clip-path Here's a thread about it Start looking at the docs for https://greensock.com/scrolltrigger/ I'm confident you can get very far. If you really need some help, I DM'd you my personal information. Regards
  12. Hi, I love the challenging animation! I've sent you a direct message. Regards, Philip