goooon
-
Posts
9 -
Joined
-
Last visited
Recent Profile Visitors
418 profile views
goooon's Achievements
-
Rare
-
-
-
Recent Badges
5
Reputation
-
@akapowl Thank you so much for helping me so much!
- 2 replies
-
- 3
-
-
- animation label
- scrub
- (and 2 more)
-
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
- 2 replies
-
- 1
-
-
- animation label
- scrub
- (and 2 more)
-
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.
-
Amazing. I can't believe it. @elegantseagulls. Thank you so much!
-
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?
-
I'm really sorry. I just called the draggable.js before the gsap.min.js and that fix it
-
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; }
-
goooon changed their profile photo
-
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 });