[Scrolltrigger parallax based on percentage.]

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?

 

 

See the Pen MWxRjxb by frilansmagi (@frilansmagi) on CodePen

[Scrolltrigger toggleactions.]

Excellent. Thank you!

[Scrolltrigger toggleactions.]

Sorry, was a little fast there.

 

Codepen: 

See the Pen vYPJEQJ by frilansmagi (@frilansmagi) on CodePen

[Scrolltrigger toggleactions.]

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!

[Animated steps() using splittext.]

Thanks! Will look into it right away.

[Animated steps() using splittext.]

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

[Animated steps() using splittext.]

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
})

 

[Is this possible?]

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!

[Is this possible?]

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

[Is this possible?]

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?

[Use Flip to animate image position.]

Nice. Did not know about scale in this context.

 

Thanks!

[Use Flip to animate image position.]

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)

See the Pen BaGXKxM by frilansmagi (@frilansmagi) on CodePen

[How to tween a nested accordion?]

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;
          }
        });
      });
    }
  }
}

 

[How to tween a nested accordion?]

Hi!

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

[How to tween a nested accordion?]

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

[How to tween a nested accordion?]

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!

See the Pen NWEvqqO by frilansmagi (@frilansmagi) on CodePen

[Rolling letters hover]

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

[Rolling letters hover]

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!