[Flip behaving wierd]

Thanks @Rodrigo, I get your point, and you're right.
Honestly, I was thinking about implementing this functionality in React. I can't use appendChild there, so my approach was to use flip-ids. Seemed easier, but now I'm kinda lost. 

[Flip behaving wierd]

Thank you very much for your help! 

originally, I made it with flip-id's because I wanted to make a similar effect but with different elements.
In the demo, I've simplified with a single marker just for demonstration. 
What if each marker had a different text and photo? I would not be able to use the appendChild method.
Sorry for not being clear on that point. The original idea was to have multiple elements.  

 

[play to a "label" in a scrubbed timeline, and update de scroll position]

On 10/25/2023 at 4:59 AM, Ritik said:

@Cassie why did @akapowl add

.addPause()

isn't the timeline defined to scrub?

@Ritik

I added a pause because, in my first approximation the button plays the timeline. without the pause it would continue to the end.

function(){
  TL.play('SECTION_1');
});

[Flip: Sliding multiple elements menu]

Flip Menu.
flip between two many different elements 

 

I add dinamically the atributte data-flip-id="matched" when click at a menu element. 

and work with a "previus active" and a "current active" element to make de animaiton. So, when the animation ends, the current element is stored as the prev element and gets ready for another click.

 

but...I'm having a problem with the Flip behavior. I don't understand why it only works in one direction.
 

What I notice is that when I go from right to left (and fail), the transform animation is on the initial position element. I believe that is the issue, but I'm not sure how to solve it. 

See the Pen dyaZvRm by Gon82 (@Gon82) on CodePen

[Flip behaving wierd]

Flip Menu.
flip between two many different elements 

I'm having a problem with the Flip behavior. I don't understand why it only works in one direction. Any suggestions?

See the Pen dyaZvRm by Gon82 (@Gon82) on CodePen

[GSAP 3 drag and draw along path]

I just realized that it moves 70px. Which is the width of the target... I added that number in the calc and it Worked

var progress = clamp((this.x + hitareaRectWidth - bounds.x)  / bounds.width)

 

See the Pen QWZZYLN by Gon82 (@Gon82) on CodePen

[GSAP 3 drag and draw along path]

Hi all. Thank you very much for your help. I have followed @ZachSaucier 's method, but it moves toward the left when I press my target.

Here is a demo. Any Idea?
Thank you very much!

See the Pen QWZZYLN?editors=1111 by Gon82 (@Gon82) on CodePen

[¿How can I get actual values through the time?]

Thank you again!! @akapowl

 

 

[play to a "label" in a scrubbed timeline, and update de scroll position]

@akapowl

Thank you so much for helping me so much!

[play to a "label" in a scrubbed timeline, and update de scroll position]

Hello everyone, I have a serious problem that I can't solve.

I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position.

 

Is it possible to solve it?

Thank you very much

 

 

See the Pen JjWXQGG by Gon82 (@Gon82) on CodePen

[¿How can I get actual values through the time?]

var photoArr = gsap.utils.toArray('#section2 .photo'); 

gsap.to(photoArr, { x:`${(i-(photoArr.length-1))*100}%`})

I know it's not the same, but I was wondering how do I get the interaction value when I use an array in a Tween?

I tried with i, but it always returns the value length. 

[ScrollTrigger vertical scroll pin-spacer problem]

Amazing. I can't believe it.

 

@elegantseagulls.

Thank you so much! 

[ScrollTrigger vertical scroll pin-spacer problem]

Hello. can't figure out how to fix this.

I searched the forum, but did not find exactly this problem. And what I did find I didn't really understand.

If pinSpace: True,  I have a huge padding below section 2. 
If pinSpace: false, the spacer exceeds the section 3.

 

*The reason why I give so much height to section 2 is to slow down the animation. 

 

Can you help me? 

 

See the Pen gOmOxze by Gon82 (@Gon82) on CodePen

[How to create a sortable list with Draggable]

I'm really sorry. 
I just called the draggable.js before the gsap.min.js and that fix it

[How to create a sortable list with Draggable]

Thank you for the quick answer!
I'm using the Vanilla version.  This is my code:

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"></script>
	<script src="script.js"></script>
	<title>::::::::::</title>
	
</head>
<style>
		*{
			font-family: sans-serif;
		}
		.list-item{
			padding: 20px ;
			width: 100%;
			background: #e0e0e0;
			position: absolute;
			top: 0;
			left: 0;  
			box-sizing: border-box;
		}
		.container{
			border: 1px solid red;
			width: 324px;
			position:absolute;
			left: 20PX;
			top:100px;
			box-sizing: border-box;
		}
</style>
<body>
	<div class="container">

			<div class="list-item">
				<div class="item-content">
					<strong>Alpha </strong><span class="order">0</span> 
				</div>
			</div>
			
			<div class="list-item">
				<div class="item-content">
					<strong>Bravo </strong><span class="order">1</span> 
				</div>
			</div>
			
			<div class="list-item">
				<div class="item-content">
					<strong>Charlie </strong><span class="order">2</span> 
				</div>
			</div>
			
			<div class="list-item">
				<div class="item-content">
					<strong>Delta </strong><span class="order">3</span> 
				</div>
			</div>
	</div>
</body>
</html>

 

JAVASCRIPT

'use strict';

var sortablesArray;
const gridHeight = 80;
var totalItemsCount;

document.addEventListener('DOMContentLoaded', ready);

function ready(){
	
	const items = Array.from(document.querySelectorAll('.list-item'));
	totalItemsCount = items.length;
	const container = document.querySelector('.container');
	container.style.height = items.length * gridHeight + "px";
	drag(items);
}


function drag(items){

	sortablesArray = items.map(sortableCreator);
	function sortableCreator(element, index) {
		console.log(element)
		var dragger = new Draggable (element ,{
			type: "y,x",
			lockAxis: true,
			edgeResistance: 0.5,
			bounds: ".container", 
			onDragStart: dragStart,
			onDrag: whileDrag,
			onDragEnd: dragEnd
		});

		const sortable = {
			'name': element.querySelector('STRONG').innerText,
			'dragger':dragger,
			'element':element,
			'index': index,
		};

		//posicionar inicialmente
		gsap.set(element, { y: index * gridHeight }); 

		const animation_OnDrag = gsap.to(element, {
			duration: 0.05,
			scale: 1.04,
			force3D: false,
			boxShadow: "rgba(0, 0, 0, 0.2) 0px 30px 50px -10px",
			paused: true,
			ease: 0.5
		});

		function dragStart() {
			console.log("start drag");
			animation_OnDrag.play();
		}

		function dragEnd() {
			console.log("end drag");
			animation_OnDrag.reverse();
			gsap.to(element, {duration:0.3, y: sortable.index * gridHeight });
		}

		function whileDrag() {
			var newIndex = clamp(Math.round(dragger.y / gridHeight), 0, totalItemsCount - 1);  // yPosition, minValue , maxValue
			if(sortable.index != newIndex){
				move(sortablesArray,sortable.index, newIndex);
				changePosition();
			}	
		}
		return sortable;
	}
}

function changePosition(){
sortablesArray.forEach((sortable, index) => {
	if (!sortable.dragger.isDragging) {	
		gsap.to(sortable.element,{duration: 0.3, y: sortable.index * gridHeight });
	}
});
}

function move(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
array.forEach((el, index) => {
	el.index = index;
	el.element.querySelector('SPAN').innerText = index;
	});	
}

function clamp(value, min, max) {
	return value < min ? min : value > max ? max : value;
}

 

[How to create a sortable list with Draggable]

Hi everyone, 
I have a problem implementing this method in GSAP 3
When I run the code I get this error message :  script.js:39 Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined

 

Some idea?
thank you very much

 

here is line 39

   

    39      var dragger = new Draggable (element ,{    

    40      type: "y,x",

    41      lockAxis: true,

    42      edgeResistance: 0.5,

    43          bounds: ".container", 

    44          onDragStart: dragStart,

    45          onDrag: whileDrag,

    46          onDragEnd: dragEnd

    47      });