maths

Hi, I'm trying to do a scrub/parallax effect using a percentage offset so that the height of the image can be dynamic/not set/auto. I'm applying a negative offset by 20% so that the image have some space so scrub. But how do i apply it "correct", so that the image not get out of its bounds, eg only overflowing 20% bottom and top and keep scrubbing on that area?

Excellent. Thank you!

Sorry, was a little fast there. Codepen: https://codepen.io/frilansmagi/pen/vYPJEQJ

Hi, I was wondering how i can trigger a timeline animation on both scroll up and down. I have manage to trigger it once the scroll passes the window's top +65px which is the height of a fixed menu. But i want to be able to show the menu when scrolling up and hide it when scrolling down. Current code: const menu = document.querySelector('[data-menu]') const tl = gsap.timeline({ scrollTrigger: { start: 'top+=65', end: '+=1', toggleActions: 'play none none reverse', scrub: 1.25 } }) tl.to(menu, { yPercent: -100 }) Thanks!

Thanks! Will look into it right away.

That is _exactly_ what i mean! I can sure put together a demo, but it wont show what i'm after since i don't know how to do it. But your explanation sums it up perfect. EDIT: the link you provided is broken

Hi, How can i apply the splittext functionality to a simple step() so each number in the counter gets its own animation? I would like each number, when it appears to get masked into view. Like you would do when using splittext and the classic "rolling text animation". See code: import gsap from 'gsap' import SplitText from 'gsap/SplitText' gsap.registerPlugin(SplitText); this.el = document.querySelector('[data-loader]') this.progress = { value: 0 } this.tl = gsap.timeline({ paused: true }) this.tl.to(this.progress, { duration: 2.5, ease: 'steps(100)', value: 100, onUpdate: () => this.el.innerHTML = Math.floor(this.progress.value) }) this.tl.play() /* Function i want to run to animate each number should look something like below: */ const split = new SplitText(this.el, { type: 'lines, words, chars', linesClass:'overflow-hidden' }) this.tl.to(split.words, { yPercent: 100, duration: 0.1, ease: 'circ.out', stagger: 0.021 })

const el = document.getElementById("el"); const btn = document.getElementById("btn"); const tl = gsap.timeline({ paused: true }); tl.to(el, { x: 300, duration: 1 }); tl.to(el, { skewX: 10, duration: 0.5, repeat: 1, yoyo: true }, "-=1"); btn.addEventListener("click", () => { tl.play(); }); Done!

Thank you for the instructions! I'll give it a go and get back if needed.

Hi, I don't really have any example or code to show yet, since i first want to check if my idea is even possible. What i want to do is following: Let's say i want to animate a div from x:0 to x:200. Is it possible during that animation to also animate let's say skewX from 0 to 2 and back to 0 and make it finish at the same time as the X?

Nice. Did not know about scale in this context. Thanks!

Hi, How can i animate the image to the top of the viewport when clicking it? As it is now it almost does what i want, but quite buggy. What am i doing wrong here? I want the image to animate to the top of the viewport as well as resize (see the css class), but smooth. Same when closing it, by clicking. (For some reason the Codepen only works when in inkognito mode, at least for me)

Point taken! I came up with this instead. Thought i over complicated it a bit with what i had on the Codepen. import gsap from 'gsap'; export default class Faq { constructor() { this.sections = [...document.querySelectorAll('[data-type="top"], [data-type="sub"]')]; this.duration = 0.3; this.ease = 'power1.inOut'; if(this.sections.length) { this.sections.forEach((el) => { const trigger = el.querySelector('[data-trigger]'); const contents = el.querySelector('[data-content]'); const timeline = gsap.timeline({paused:true}); timeline.to(contents, { height: 'auto', duration: this.duration, ease: 'power1' }); contents.animation = timeline; let open = false; trigger.addEventListener('click', () => { if(open == false) { contents.animation.play(); open = true; } else { contents.animation.reverse(); open = false; } }); }); } } }

Hi! Unfortunately i have not been able to fix that logic. would appreciate if you could have a look.

That is perfect. Understand you don't have the time to implement the logic, i have no problem doing it. Thanks!

I have an accordion, containing sections which contains questions and answers. Im trying to run the same collapse code to toggle current questions answers as when collapsing a section, with no luck. Any ideas? I have cleaned up the code on purpose so that only the sections are working. Thanks!

Thank you! Should have expressed me differently. Was sure there was a demo somewhere (and with over 10 years as a dev that's enough to implement it myself). /M

Hi! I was wondering how i can achieve the hover effect used in the main menu on this site https://bryhel.com/ ? Preferably using splittext. Ignore the dot thats following the mouse, its the text effect im after. Thanks!