[how to animate the previous sliding card that has been pinned]

24 minutes ago, mvaneijgen said:

Than don't include the first card in the selector and change the timing a bit, see JS comments

 

 

 

Thankssss, my problem has been solved, sorry for bothering you

See the Pen MWReBVG by adeivan (@adeivan) on CodePen

[how to animate the previous sliding card that has been pinned]

22 minutes ago, mvaneijgen said:

Pernahkah Anda melihat demo yang saya tautkan ini? Ia melakukan apa yang Anda inginkan, tetapi ia juga berputar, jadi hapus saja rotasinya agar skalanya saja. 

 

Perlu diingat: Hal terbaik yang harus dilakukan saat bekerja dengan ScrollTrigger adalah menghapusnya! Ini tampaknya berlawanan dengan intuisi, namun ScrollTrigger hanya menganimasikan sesuatu saat digulir, jadi fokus saja pada animasinya terlebih dahulu dan hanya jika Anda puas dengan animasinya, tambahkan ScrollTrigger kembali. Dengan cara ini Anda dapat fokus pada satu bagian pada satu waktu dan itu akan menghemat banyak sakit kepala saat debugging. 

 

 

 

Yes, I have seen it, but how do I get the card position to start directly from the first card?

[how to animate the previous sliding card that has been pinned]

Hello, I have a sliding card like the this 

See the Pen XWqRPrr by adeivan (@adeivan) on CodePen

 , but I can't seem to use it in my case, 

I made a new approach like this

 

how to make the animation the same as the previous code?

so the new card enters the container > about 50% of the card enters the container > scale down to 0.8 > after the scale down is 100% complete > then opacity to 0

[how to animate the previous sliding card that has been pinned]

17 minutes ago, mvaneijgen said:

Lihat postingan yang saya buat ini. Ini menunjukkan kepada Anda bagaimana Anda dapat menyiapkan CSS untuk membuat efek penumpukan kartu apa pun yang Anda inginkan dengan GSAP.

 

 

Setelah membaca postingan, Anda mungkin ingin memberi perhatian khusus pada demo dari postingan ini. Semoga membantu dan selamat tweening! 

 

 

Lihat Pena

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

oleh mvaneijgen ( @mvaneijgen ) di CodePen

 

Wow, I didn't expect to be able to do it with such a simple code, thank you.

[how to animate the previous sliding card that has been pinned]

12 minutes ago, mvaneijgen said:

Instead of pin: true, you can also set pin: ".thisSpecificElement" if you want to pin a specific element. I'm not sure which element you want to pin, but give it a shot. 

This is the sliding card I'm referring to

See the Pen XWqRPrr by adeivan (@adeivan) on CodePen

 

I tried using this, but the card is not stacked
pin: ".panel .section-2",
pinType: "fixed",

 

[how to animate the previous sliding card that has been pinned]

I have 2 animations, The main animation is a sliding section, and the 2nd animation is a sliding card that is placed inside the sliding section, is it possible to pin the sliding card to the sliding section?

See the Pen NWmrXwO by adeivan (@adeivan) on CodePen

[How to add ScrollTrigger.batch delay on first load?]

how do I add a delay of about 3 seconds after the page is loaded, I tried adding a 3 second delay in gsap.to but when I scroll it doesn't want any delay

 

I've also tried using a timeout outside of ScrollTrigger.batch with a duration of 500ms, but it makes it only execute half of the elements that will be displayed.

See the Pen XWQdbBq by adeivan (@adeivan) on CodePen

[Another animation issue when adding a Y animation]

I have a problem when I add Y animation, why is the sliding animation when scrolling not correct?

while without the Y animation, the sliding works, I've tried to init when onComplete but that doesn't fix the problem either.

See the Pen GReXpvg by adeivan (@adeivan) on CodePen

[Drag Oversize Div Inside Container]

how to drag content with a size larger than the container, if the size of the content is small it is fine, but if the size is large it cannot be dragged.

See the Pen rNRRwBb by Tutor-Indonesia (@Tutor-Indonesia) on CodePen

[how to be able to drag X/Y using 2 fingers via trackpad/ scroll event]

9 minutes ago, Ivan Mocs said:

 

yep, like this! but the movement is inverted, when I swipe left, the object moves right, likewise when up, the object moves down,

 

I changed + to - in this code and it seems to fix the mistake

 

const myObserver = Observer.create({
  type: "wheel",
  wheelSpeed: 10,
  onChange(self) {
    xTo(getter("x") - self.deltaX);
    yTo(getter("y") - self.deltaY);
  }
});

 

a suggestion from me, maybe you can create a new option for draggables like the one at https://ilyashubin.github.io/scrollbooster/

which is emulateScroll

 

Thank you btw
 

and this can lead to new problems, such as shifting without knowing the bounds.

[how to be able to drag X/Y using 2 fingers via trackpad/ scroll event]

4 minutes ago, GreenSock said:

Maybe this will help: 

 

 

 

yep, like this! but the movement is inverted, when I swipe left, the object moves right, likewise when up, the object moves down,

 

I changed + to - in this code and it seems to fix the mistake

 

const myObserver = Observer.create({
  type: "wheel",
  wheelSpeed: 10,
  onChange(self) {
    xTo(getter("x") - self.deltaX);
    yTo(getter("y") - self.deltaY);
  }
});

 

a suggestion from me, maybe you can create a new option for draggables like the one at https://ilyashubin.github.io/scrollbooster/

which is emulateScroll

 

Thank you btw
 

[how to be able to drag X/Y using 2 fingers via trackpad/ scroll event]

7 minutes ago, GreenSock said:

I'm not quite sure what you're trying to do, but here's a fork that shows the "wheel" events triggering the onChangeY() callback on the Observer when you wheel while over the box: 

 

 

 

If you're trying to sense touchmove events, you can use type "touch", but if you're trying to do multi-touch detection and gestures, that's not really what Observer is for. 

maybe like on this site, can be swiped with a trackpad : https://amie.so/recap

[how to be able to drag X/Y using 2 fingers via trackpad/ scroll event]

I'm looking for an example of an obeserver with type "wheel" but I don't know how to do it.

See the Pen rNRPRjN by adeivan (@adeivan) on CodePen

[Draggable + Overview + Zoom]

how to zoom in & out by scrolling/pinching with finger with gsap, is there any template other than this? thank you.

See the Pen YzgdmYM by adeivan (@adeivan) on CodePen

[its possible make vertical & horizontal scrolling in container with pinned section + pinSpacing: false ?]

8 hours ago, Ivan Mocs said:

Is it possible to scroll through text in a pinned container?

this is my update code

 

codepen.io/adeivan/pen/JjzBZKy

 

I've tried it, and it works, but how do I get the scrolling on each section to finish before the other section enters?

I used pinSpacing: false to get the section stack effect

[its possible make vertical & horizontal scrolling in container with pinned section + pinSpacing: false ?]

this is my update code

codepen.io/adeivan/pen/JjzBZKy

I've tried it, and it works, but how do I get the scrolling on each section to finish before the other section enters?

I used pinSpacing: false to get the section stack effect

[its possible make vertical & horizontal scrolling in container with pinned section + pinSpacing: false ?]

Is it possible to scroll through text in a pinned container?

See the Pen JjzBZKy by adeivan (@adeivan) on CodePen

[possible to switching smootscroller to another div?]

8 menit yang lalu, mvaneijgen berkata:

Saya telah menambahkan beberapa JS ke penangan klik Anda yang memberikan kelas ke elemen tubuh .disable-scroll, yang mengatur overflow-y: hidden; melalui CSS dan ini akan mencegah gulir. Ini sebenarnya bukan masalah GSAP, saya hanya mencari di Google "bagaimana cara berhenti menggulir di belakang elemen" dan ini adalah posting pertama yang muncul https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/ Semoga membantu dan selamat tweening!

 

 

 

Yeah you right, adding overflow:hidden will stop the scroll function, but how can I make smoothScroll inside the current div, there I write "THIS IS SCROLLING CONTENT" but I can't scroll it.

I can't use the id "#smooth-content" at the same time

If I add "#smooth-content" to the popup div that is currently appearing then scroll only works on that div, not on the div below it.

8 menit yang lalu, mvaneijgen berkata:

const smoother = ScrollSmoother.create({
  smooth: 1.4,
  content: "#smooth-content", //How to toggle to ".new-section-container"
  wrapper: "#smooth-wrapper",
});

 

[possible to switching smootscroller to another div?]

how to move the smoothscroll to another div, I want when clicking the "SHOW MORE DETAIL" button then the smoothscroll is activated on the open div [id="detail-section"], but for the div behind it is stopped.

 

And when the "CLOSE DETAIL" button is clicked then the smoothscroll is active again [id="smooth-content"].

See the Pen rNQwOXQ by adeivan (@adeivan) on CodePen

[how to make end elements on page edges?]

Yep, thanks

See the Pen qBQWrdX by adeivan (@adeivan) on CodePen

Can horizontal scroll use scrolltrigger? I use scroll trigger to display section name but scrolltrigger seems to start from top to bottom not from left to right? if I create vertical content section name works fine, but for horizontal scroll it only reads 1 section.

[how to make end elements on page edges?]

Here I have elements with different widths, but I have a problem that the end of the element is not at the edge of the page, how do I make it stop at the edge of the page?

See the Pen QWJLbZa by adeivan (@adeivan) on CodePen

[How to add delay first page load only?]

How do I add a delay only on the first page load. I don't want any delay while scrolling.

	ScrollTrigger.batch(".fadeup-startup", {
		onEnter: elements => {
			gsap.from(elements, {
				autoAlpha: 0,
				y: 60,
				stagger: 0.2,
				delay: 2.3
			});
		},
		once: true
	});

[Its possible to disable Transform while out off viewport on multiple element]

I'm confused about how to determine the start and height, I want each element that is selected by [data-scroll] to have its own end, I mean when one element exits the viewport first, the transform movement stops.

See the Pen OJwBomP by adeivan (@adeivan) on CodePen

When viewed from the inspector on the element with data-scroll="0.75", the transform value is still changing even though the position is out of the viewport area.

I've tried to set the "end" but when one element exits the viewport, the other element's transform also stops.

 

How to make each element have its own "start" and "end"

[Its possible to disable Transform while out off viewport on multiple element]

its possible to disable the transform that runs outside the viewport?

if seen from the inspector when element 1 has out of viewport "transform" is still running, I want it to be paused when out of viewport.

See the Pen oNMajzG by adeivan (@adeivan) on CodePen

[ScrollTrigger displays a glitch on the div when scrolling the page]

1 hour ago, GSAP Helper said:

Sorry, but it's very difficult for me to understand what you're asking. It looks like you're using a very old version of a basic ScrollSmoother that isn't full-featured. Is there a reason you're not using ScrollSmoother? We can't really support limited implementations like this one. 

If you're still having trouble, please make sure you make it extremely clear what the problem is what what you want to have happen, like: 
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the  class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad().

Update : Solution found, thanks in advance