Jump to content
Search Community

mdtrndprsn

Members
  • Posts

    3
  • Joined

  • Last visited

mdtrndprsn's Achievements

  1. Hey @Rodrigo! Thank you very much again for your help - now I figured it out how to hide or show the elements on scroll with Flip & ScrollTrigger! but I just can't seem to figure out how to animate those with ease & maybe even a scale animation. Would you mind helping me out one more time? Here is the CSS - I just changed a bits and pieces from your provided example.... .big-star.active { visibility: hidden; } .little-star { visibility: hidden; } .little-star.active { visibility: visible; } .big-star, .big-star.flipping { visibility: visible; } ....the same goes for the JS code! gsap.registerPlugin(Flip); const bigStar = document.querySelector(".big-star"), littleStar = document.querySelector(".little-star"); const doFlip = () => { const state = Flip.getState(".little-star, .big-star"); bigStar.classList.toggle("active"); littleStar.classList.toggle("active"); Flip.from(state, { duration: 0.3, fade: true, absolute: true, toggleClass: "flipping", ease: "power1.inOut" }); }; ScrollTrigger.create({ trigger: "#flip-maybe", start: "top 30%", end: "top 40%", markers: true, onEnter: doFlip, onEnterBack: doFlip, }); I'm sorry I can't really provide a minimal demo as this would certainly help in debugging Here is the link again for the live site if you need it! thanks again for the help and wish you and the Greensock team an awesome evening/day!
  2. Thank you for your warm welcoming @Rodrigo! I didn't think of that at all! I'm going to give it a try - thank you very much!
  3. Hey! I'm currently working on a client website in Elementar for them to customise their content later on. I have to get the big star shown in the screenshot to animate down where the smaller blue star is and resize it at the same time. When scrolling the star has to change its position - resize - and stay as a fixed item. So that I can remove the second smaller one at the bottom of the page. The star will be a fixed position image which will open a pop up when clicked at the bottom of the page. I may be able to do all that with ScrollTrigger but I just can't seem to figure out how unfortunately Thank you in advance for the help! for anyone maybe needing the link here it is
×
×
  • Create New...