Mauro.ie31

March 10, 2021

Hello there,

I developed my website using ScrollTrigger with Horizontall Scrool

As you can see there is an ease scrolling (when reaching the end of the website it's necessary to scroll with more intensity respect of the beginning of the website).

This is my code :

    const sections = gsap.utils.toArray(".panel");
    let maxWidth = 0;
    let index = 0;
    const getMaxWidth = () => {

      maxWidth = 0;
      sections.forEach((section) => {
        maxWidth += section.offsetWidth;
      });
    };
  
    var masterScrollTrigger = gsap.to(sections, {
      x: () => `-${maxWidth - window.innerWidth}`,
      //ease: "Power0.inOut",
      ease:"Linear.easeNone",
      scrollTrigger: {
        trigger: ".container-scroll",
        pin: true,
        scrub: 1,
        end: () => `+=${maxWidth}`,
        invalidateOnRefresh: true

      }
    });

Question is: How do I remove the ease effect and make the scroll "linear" at the start of the website and at the end?

Thanks

February 25, 2021

33 minutes ago, ZachSaucier said:

@tailbreezy The post that you referenced is talking about Yarn, not NPM.

@Mauro.ie31 It's pretty hard to know what's going wrong without seeing your setup for ourselves. Something is messed up in the configuration. Have you already tried reinstalling by following the private registry NPM instructions on your account dashboard?

I actually solved by using npm instal gsap.bonus.tgz.

It's actually pretty hard to know. I try to delete my package json and install the packages from beginning.

I don't know. Hope it doesn't happen again

February 25, 2021

Hi there,

I created the .npmrc file in my root project.
After I upgrade to nodejs v. 14 and reinstalled my pacjage I ave trouble to install gsap/shockingly:

I get this error:

npm ERR! code E403
npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz - You must be logged in to install/publish packages.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\me\AppData\Local\npm-cache\_logs\2021-02-25T11_44_49_017Z-debug.log

January 31, 2021

Solved with this:

January 31, 2021

I'm unsing ScrollToPlugin.

So I have a timeline with different labels.

Is it possible to scroll to the actual label position??

I set up a method:
timelinePlanets is my timeline.

function scrollToLabel(labelName){

const pos = Math.ceil(document.body.scrollHeight * (timeLinePlanets.labels[labelName] / timeLinePlanets.duration()) )

TweenMax.to(window, { duration: 2, scrollTo: pos, ease: 'power1.inOut' })

}

January 31, 2021

Hello everyone,

I have have a timeline controlled with ScrollTrigger and inside I have some labels.

So I have some methods that do a tweenFromTo from one label to another, but then of course If I start scrolling again I restart from the last ScrollTrigger progress.

Is it possible to update the scrollTrigger progress value to the actual timeline time that occurs at the end of tweenFromTo?

Recap:

I have a timeline.

Timeline is controlled with ScrollTrigger.

Timeline has 3 different labels (label1, label2, label3).

If i do timeline.tweenFromTo("label1", "label2") everything is fine.

But then if I restart scrolling i restart from the last ScrollTrigger progress value.

Is it possible to update the timeline.ScrollTrigger value so If i Scroll I start from the end of timeline.tweenFromTo("label1", "label2")?

Thanks

January 27, 2021

Hi everyone,

I'm trying to import plugin Split Text in my React Gatsby Application.

So I installed gsap via npm and I don't have problems with other plugins but I really can't register SplitText.

I'm trying to import as this:

import { gsap } from "gsap";

import { SplitText } from "gsap/SplitText";

But i'm getting this error: 'Can't resolve 'gsap/SplitText'

If you're trying to use a package make sure that 'gsap/SplitText' is installed.

I've really lost lot of time.

Thanks

January 27, 2021

3 hours ago, GreenSock said:

If I understand your question correctly, it looks to me like just tweening the rotationX of the element(s) with a transformOrigin that has its "z" component set back a bit in the viewport.

See the Pen xxEvMoG by mauroie31 (@mauroie31) on CodePen

I modify a previous codepen to recreate the effect.

Thanks for your help

January 26, 2021

Hello,

I'm trying to replicate the text animation on element with class "cb-tophead-title" from Cuberto.

https://cuberto.com/services/digital/

Any way to achieve that?

Thanks for helping.

December 16, 2020

If it necessary I'll open a new topic.

But is it possible to have a drag scroll ( horizontall drag specifically) that works with horizontal scroll trigger?

December 16, 2020

9 hours ago, akapowl said:

With native horizontal scrolling I meant something like this

And I actually just realized that what I wrote above might not even be relevant for you, because there are quite a few different approaches on how to achieve the fake-horizontal scrolling. So it would be great, if you could provide a demo codepen of how you do that in the first place. It would make it easier to help.

I guess each approach has its pros and cons, but maybe you could consider changing your setup, so what you want to achieve becomes a bit easier to do.

This pen here for example translates each section to the left on the x-axis for the amount of the whole container-scrollWidth instead of the xPercent of the section itself multiplied by its index. The pinning happens on the container itself, but to get it working, you'd need an extra wrapper around the sections to act as the trigger-element. But in this scenario it is quite a bit easier to wrap your head around animating things depending on where the sections are.

You are really great.

Thanks for your help

December 16, 2020

Sorry agait, but what you intend for "real native horizontal scrolling"?

Thanks

December 16, 2020

On 12/14/2020 at 7:38 PM, akapowl said:
Hey @Mauro.ie31

It looks to me, like for none of the variables you are setting up above, you are considering the 'offset' I described in detail in my post above.

You will have to take that 'offset' into consideration for each of your starts and ends of each of your ScrollTriggers for each section.

For everything that you want to consider horizontally you will have to make up for the discrepancy between the duration of the fake-horizontal-tween and the actual 'duration' of the scroll . This is the key-factor to consider for all your starts and ends
* (document.querySelector(".container").offsetWidth/(sct.offsetWidth * (sections.length - 1))
See the last pen I posted above, and how it is applied there.

I know that it is complicated, but I actually don't know how to better describe it, than the way I already did.

I'm sorry but it doesn't work.

I have seven section with different width.

For example:
- Section 1 has 500vw,
- Section2 has 200vw,
- Section 3 has 200vw,
etc.

If I do this:
- For the first section is ok, because it starts from zero.

But from the second :

      gsap.timeline({
        scrollTrigger: {
          trigger: "body",
          //6 è il numero delle sezioni totali - 1
          start: 'top top-=' + (section2OffsetLeft - window.innerWidth / 2) * (containerWidth / (section2OffsetWidth * (6))) ,
          end: '+=' + section2OffsetWidth * (maxWidth / (section2OffsetWidth * (6))),
          scrub: true,
          onUpdate: self => {
            console.log('second section');
            console.log(self.progress);
        },
        },
        // backgroundColor: "red",
        ease: "none"
      })

The timeline will trigger very very far from the actual point.

Is that because the width of each section are different?

Thanks a lot you are really helpful.

December 14, 2020

I'm sorry but I'm not able to resolve this.

I'm tryng to locate the first start of each section.

Suppose I have three sections, #Section1, #Section2, #Section3.

I want to locate the start and the end of each section, so I could apply gsap transition in the interval from the start and the end of each section.

 gsap.registerPlugin(ScrollTrigger);


    const sections = gsap.utils.toArray(".panel");
    let maxWidth = 0;
    let index = 0;
    const getMaxWidth = () => {
      maxWidth = 0;
      sections.forEach((section) => {
        index++;
        switch (index) {
          case 1:
            section1Width = section.offsetWidth;
            break;
          case 2:
            section2Width = section.offsetWidth;

            break;
          case 3:
            section3Width = section.offsetWidth;
            break;
        
        }
        maxWidth += section.offsetWidth;

      });

So, after, I defined the variables start and end of each section:

 section1Start = 0;
      section1End = section1Width;
      console.log('Sezione 1 Inizio: ' + section1Start + ' Sezione 1 Fine: ' + section1End )

      
      section2Start = section1End;
      section2End = section2Start + section2Width;
      console.log('Sezione 2 Inizio: ' + section2Start + ' Sezione 2 Fine: ' + section2End);

      section3Start = section2End;
      section3End = section3Start + section3Width;
      console.log('Sezione 3 Inizio: ' + section3Start + ' Sezione 3 Fine: ' + section3End);

Then, I do a transform to #section 1

    
    gsap.to("#section1", {
      scrollTrigger: {
        trigger: "body", // elemento oggetto dello scrolltrigger
      //  start: () => "0 -" + (document.querySelector(".container-scroll").offsetWidth / (sections.length - 1) * 1),
        start: "top-=0",

        end: "+=" +  section1End,
        scrub: true,
        markers: true,
        onUpdate: self => {
          console.log(self.progress);

        },      },
      backgroundColor: "#000",
      ease: "none"
    });

But actually the end of the gsap transform is more long than the actual width. I don't know where are my mistake becase the calculations are correct.

Where am I wrong?

December 2, 2020

Hello,

I'm using Gsap Scroll Trigger with my all my entire pages.
I have multiples sections.

Every section has different child element.

I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ).

But I don't know how to do it and I don't know if it's possible.

Praticale example:

In the codepen i want something like this this:

Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport.

Thanks for your help

gsap.from('#text-1', {

opacity: 1,

x: -300,

scrollTrigger: {

trigger: '.red',

start: '80% 50%',
end: '+=500',

scrub: 1,

},

});

gsap.from('#text-2', {

opacity: 1,

y: 300,
rotate: -90,

scrollTrigger: {

trigger: '.red',

start: '60% 50%',
end: '+=500',

scrub: 1,

},

});

See the Pen vYXBdKa by mauroie31 (@mauroie31) on CodePen

November 20, 2020

4 hours ago, mikel said:

Hey @Mauro.ie31,

Combining all relevant elements in one SVG makes perfect sense.

All relations are defined and are flexible / responsive overall (viewBox).

What is the reason to use a separate element?
Please show your case in a CodePen.

I need to apply a transformation to the entire svg, but mantaining the secondary element (the red one in the codepen example) at the same position.

Is there a way to apply the transform only to the big green element?

Thanks

November 20, 2020

2 hours ago, mikel said:

Hey @Mauro.ie31

This example uses a scroll trigger and a timeline to manage the sequences:
with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px.
You can of course change the duration of the tween or the position of the second tween

- and thus the relationship to each other.

Happy scrolling ...

Mikel

Sorry, but why if I put a normal div inside, external from the svg, it doesnt follow the circlePath?

Then I apply the transform to "#div" insthead of #small

        <svg id="greenCircles" viewBox="0 0 300 200">

            <circle v-on:click="readMore()" cx="300" cy="100" r="100" stroke="none" fill="#53877e" />
            <g >
                <circle cx="400" cy="100" r="20" stroke="none"  />
            </g>
            <circle id="circlePath" cx="300" cy="100" r="100" stroke="none" fill="none" />
        </svg>

        <div id="div" style="height:10em; width: 10em; border-radius:100%; background-color:red"></div>

November 20, 2020

55 minutes ago, mikel said:

Hey @Mauro.ie31

This example uses a scroll trigger and a timeline to manage the sequences:
with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px.
You can of course change the duration of the tween or the position of the second tween

- and thus the relationship to each other.

Happy scrolling ...

Mikel

Wonderful.

Thanks for your help.

November 20, 2020

Specifically,

I have this pinned container:


            gsap.to('#areas-el-content', {
                scrollTrigger: {
                    trigger: '#areas-el-content',
                    start: '-100% top',
                    end: '+=3500',
                    pin: true,
                    scrub: 1,
 

                },
            });

This Pinned container, last 3500 px scroll (end: +=3500) from the start.

In this case I want to apply different animations on different height of pinned content.

- First animation starts at 200px and finish at 800px of the pinned content scrolled.
- Second animation, applied on the same element, starts at 900px and finish at 1400px of the pinned content scrolled.

November 20, 2020

Hi there,

probably I have problem understanding scrolltrigger sequence on animation on same element.

So, I have this first animation, using motionpath, that starts from bottom and arrive at center of the green circle of the example, with this code:

**
             * First animation
             */
            gsap.to("#div", {
                duration: 5,
                repeat: 0,
                repeatDelay: 0,
                yoyo: false,
                opacity: 1,

                ease: "power1.inOut",
                motionPath: {
                    path: "#path",
                    align: "#path",
                    autoRotate: true,
                    alignOrigin: [0.55, 0.55],
                    start: 0.5,
                    end: 0,
                },
                scrollTrigger: {
                    trigger: "#areas-el-content",
                    start: '-100% top +=200',
                    end: '+=600',
                    scrub: 1,

                }
            });

On the second animation, I'll make the #div element complete the path on the green circle.

I want that this happens after the end of first animation plus 100px scroll.

I don't know hot to proper set the start and end in the Second Animation Scroll Trigger and I don't know if it is the correct way to apply it.

Thanks for your help.

In the codepen there is an example.

See the Pen dyXaXod by mauroie31 (@mauroie31) on CodePen

November 20, 2020

33 minutes ago, ZachSaucier said:
Maybe you should be waiting for the window to finish loading instead of the DOM to be ready:
window.addEventListener("load", function() {
  // Your stuff here
});

Yes that works

November 19, 2020

On 11/16/2020 at 2:48 PM, ZachSaucier said:

Seems like it? Like I said, please make a minimal demo of the issue if you'd like our help debugging.

So,

i solved id by adding a delay to gsap animation after dom is ready.

I don't know why it happens, maybe the page contained a lot of code.

Thanks for support

November 16, 2020

6 hours ago, ZachSaucier said:

Seems like it? Like I said, please make a minimal demo of the issue if you'd like our help debugging.

I

November 16, 2020

On 11/13/2020 at 9:25 PM, ZachSaucier said:

Hey Mauro. You just mean you see the the images when the page is loaded for a brief period of time? You should be able to fix that with CSS. It's hard for us to debug without being able to edit the code ourselves. Try adding a higher z-index to the loading section.

If you can't figure it out, please make a demo the recreates the issue for us to debug

Nice looking site by the way!

But why the initial opacity is not applied on the first time loading? Only after a refresh.

The elements have opacity: 0 before on the css before starting.

The animation is exactly the same as this one:

Maybe I did some mistakes implementing the code?

Thanks

November 13, 2020

Hi there,

I have trouble with some scrolltrigger implementation in Firefox, everythings works fine in Chrome.

This is the website demo:
As you can see from the attached file, there is a section that appears in top of the first section.

Thanks for replying

In the codepen url there is the same animation with different assets and colors.

See the Pen dyXaXod by mauroie31 (@mauroie31) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Mauro.ie31