Jump to content
Search Community

goooon

Members

  • Posts

    16

  • Joined

  • Last visited

About goooon

  • Birthday 01/09/1982

Profile Information

  • Location
    Argentina
  • Interests
    JS, frontend

Recent Profile Visitors

833 profile views

goooon's Achievements

  • Dedicated Rare
  • Conversation Starter Rare
  • First Post Rare
  • Collaborator Rare
  • Reacting Well Rare

Recent Badges

6

Reputation

  1. goooon
    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.
  2. goooon
    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.
  3. goooon
    @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'); });
  4. goooon started following ScrollTrigger vertical scroll pin-spacer problem , Flip: Sliding multiple elements menu , Flip behaving wierd and 3 others
  5. goooon
    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. https://codepen.io/Gon82/pen/dyaZvRm
  6. goooon
    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? https://codepen.io/Gon82/pen/dyaZvRm
  7. goooon
    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) https://codepen.io/Gon82/pen/QWZZYLN
  8. goooon
    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! https://codepen.io/Gon82/pen/QWZZYLN?editors=1111
  9. goooon
    Thank you again!! @akapowl
  10. goooon
    @akapowl Thank you so much for helping me so much!
  11. goooon
    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
  12. goooon
    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.
  13. goooon
    Amazing. I can't believe it. @elegantseagulls. Thank you so much!
  14. goooon
    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?
  15. goooon
    I'm really sorry. I just called the draggable.js before the gsap.min.js and that fix it
  16. goooon
    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; }
×
×
  • Create New...