Tag: Animation

GSAP ScrollTrigger – Setting Scrub, Start and End Points

DEMO open in a new tab HTML <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>GSAP...

GSAP ScrollTrigger plugin Animation on Scroll

GSAP

Hi there, this is my first GSAP’s ScrollTrigger Plugin animation that executes when user scroll down to a trigger i.e. when trigger is visible on the viewport. I have colored the sections to make it look more understanding while animation is happening. So scroll...

Nice header Animations using GSAP – JavaScript Animation Library

GSAP

Here are some cool header animations used in their official website – https://greensock.com/ See the Pen GSAP Homepage Demo 4 by Puneet Sharma (@webdevpuneet) on CodePen. See the Pen GSAP Homepage Demo 3 by Puneet Sharma (@webdevpuneet) on CodePen. See the Pen...

Unique ripple effect animation on hover that follows cursor

CSS Animations

Created this cool-looking ripple effect animation on the button. It can be implemented on any other element other than buttons. The expanding ripple / circular shape follows mouse/pointer movement during the mouseenter and mouseleave event. The supporting script is in...

Hero with cool spotlight effect and cursor tracking

Misc

Hero section layout with spotlight effect and cursor tracking Here is HTML, CSS, JS code for a very cool hero section that has a spotlight effect, cursor tracking, and menu. The code uses the GSAP JavaScript library. The menu is also very cool that opens up with...