Jump to content
GreenSock

Anup

Members
  • Posts

    4
  • Joined

  • Last visited

Recent Profile Visitors

222 profile views

Anup's Achievements

  1. Hey everyone, I'm looking freelancer for GSAP developers who can work immediately. You can check PDF file for animation and design https://3940583.fs1.hubspotusercontent-na1.net/hubfs/3940583/2022 - LP assets - SABM/TIS_GBR_2678 _ Educate Timeline - DesktopAnimatic-v5-sml.pdf You can connect with my email id (anup@hermitcrabs.io) or google meet Thanks!
  2. Sorry for my English. In my first post everything is correct but chevron animation is not correct. But my 2 posts, the animation of chevron is correct but after the animation of circle and content is over, the chevron animation will run. I am not good in GSAP ScrollTrigger. 1st Post URL https://codepen.io/amrs/pen/NWXQRvy 2nd Post URL https://codepen.io/amrs/pen/eYVpjLq
  3. Thank You for this. It's working... I need To handle last 2 arrow. I little bit achieve this point but I am not able to synchronize arrow scroll Triger with content animation after completed. gsap.registerPlugin(ScrollTrigger); function updateView() { let tlWrap = document.querySelector('.timeline-inner').offsetWidth; gsap.set('.content', { width: ((tlWrap - 50) / 4), height: ((tlWrap - 50) / 4), }) gsap.set('.arrow', { height: ((tlWrap - 50) / 4), }) gsap.set('.timeline-inner', {maxHeight: (tlWrap - 50) / 4, height:(tlWrap - 50) / 4}); } updateView(); window.onresize = updateView; let tw = gsap.timeline({ scrollTrigger: { trigger: ".timeline-wrap", scrub: true, pin: true, start: "center center", // end: () => "+=" + document.querySelector('.timeline-wrap').offsetWidth, end: "+=500%", // id: "__TW", // markers: { // startColor: "yellow", // endColor: "orange", // indent: 500 // }, toggleActions: "play none none reverse" } }) tl = gsap.timeline({ scrollTrigger: { trigger: ".content_1", scrub: true, // pin: true, start: "top 73%", end: "bottom center", // id: "__tl", // markers: { // startColor: "blue", // endColor: "pink", // indent: 200 // }, toggleActions: "play none none reverse", } }) tl2 = gsap.timeline({ scrollTrigger: { trigger: ".content_2", scrub: true, // pin: true, start: "center center", end: "+=200%", id: "__tl2", markers: { indent: 0 }, toggleActions: "play none none reverse", }, defaults: { duration: 1 } }) tl .to('.circle1', { width: "100%", height: "100%" }) .to('.content_1 .items', { opacity: 1 }, '-=0.1') .to('.content_1 .logo', { opacity: 1 }, '-=0.5') tl2 .to('.circle1', { width: "115%", height: "115%" }) .to('.circle2', { opacity: 1 }, '<') .to('.circle1', { width: "205%", height: "205%", }, '+=0.3') .to('.circle2', { width: "100%", height: "100%", }, '<') .to('.rectangle1', { opacity: 1, width: "100%" }, '<') .to('.content_2 .items', { opacity: 1 }) .to('.content_2 .logo', { opacity: 1 }, '<') .to('.content_2 .logo img', { width: "11vw", }, '<') .to(".arrow1", { scrollTrigger: { trigger: ".arrow1", scrub: 3, start: "+=200% center", end: "center center", // id: "__TW_A", // markers: { // startColor: "red", // endColor: "yellow", // }, toggleActions: "play none none reverse" }, left: "90%", ease: "none", }) .to(".arrow2", { scrollTrigger: { trigger: ".arrow1", scrub: 2, start: "+=252% center", end: "center center", // id: "__TW_A2", // markers: { // startColor: "orange", // endColor: "#979900", // }, toggleActions: "play none none reverse" }, left: "90%", ease: "none", })
  4. Hi, Guys I just want to add Column Width and Height using GSAP not JQuery. And also I need help with Animation can you help me. What is the problem with this Code?
×