Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Aitor's Achievements

  1. Yes! very clear. Thank you so much for the explanation. I know this exceed your rol in the forum. This is my first time with this level of complexity. Fortunately, your explanation had excelent results. I've included the html setup (that includes gsap stuff) in a custom ready event after resources are loaded: https://github.com/aitormendez/tomasgarciapiriz/blob/main/site/web/app/themes/sage/resources/scripts/Experience/World/World.js#L36 Now it works as expected with no setTimeout() 🙏
  2. I've solved the issue starting the gsap stuff into a setTimeout(). I think it is not a clean fix. I dont know exactly why gsap is not working when it is normally called. All the code are into a jQuery document ready function. Any thought about it appreciated.
  3. At first load, start and end markers are placed all together at the top of viewport. This is a first load screenshot: So, all animations start at the first load. Then, when the window is resized, the markers goes to its right place. This is a screenshot after resize window: When I try to do the same in a isolated codepen (see attached codepen) it works as expected. The wrong behavior just happens in my app. I know that is hard to help with no minimal demo that reproduces the error. I'm so sorry about that. I just hope this issue is a known problem. Here is the live site. And here the GSAP code in context import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default class PostsHtml { constructor() { this.posts = gsap.utils.toArray('.post'); this.posts.forEach(post => { let postName = post.id.replace(/-/g, "") gsap.to(post, { x: 100, scrollTrigger: { trigger: post, start: 'top center', end: 'bottom center', onEnter: () => console.log('enter: ' + postName), onLeave: () => console.log('leave: ' + postName), onEnterBack: () => console.log('enter back: ' + postName), onLeaveBack: () => console.log('leave back: ' + postName), markers: true } }) }) } } What is happening here? Why start and end are not set in the right place at first load? Thanks!
  4. I'm not sure this question is right for this forum. My appologies in advance. I have an object body (from cannon-es library but it is not relevant). Then, I can animate some properties like position, this way: gsap.to( body.position, { duration:1, y: body.position.y + 10 } ) Now, I want to rotate it, but rotation in this kind of object must be done with a setFromAxisAngle() function in its quaternion property, not changing a property directly: body.quaternion.setFromAxisAngle( new CANNON.Vec3(0, 1, 0), Math.PI * 0.5 ) So, I want to animate the floating value '0.5' in this line: Math.PI * 0.5 Is it possible? Which is the right approach to do it?
  5. There is something I don't understand. let openMenu; // <------------------------- in the global scope menu.open = () => { if (!isOpen) { // <-------------------- If this menu is closed isOpen = true; // <------------------ set it to open openMenu && openMenu.close(); // <--- I don't understand this line. The last part closes // the open menu but what does "openMenu &&" do? openMenu = menu; // <---------------- Store this menu in the openMenu variable } }
  6. Of course it helps. I agree that it is much better approach: better functionallity and more readable. After seeing this solution it seem obvious. I learned some interesting things like overwrite property. And some javascript basics: I thought this way of declaring the isOpen variable would put it in the global scope, but the variable belongs to the scope of each menu, just like box and items. Thank you much.
  7. Starting from this work I want to achieve an accordion with different ease when open and close. So, It relies in progress() state instead reversed() state and has two tweens (open and close) instead one tween (reversed or not). It works, more or less. The main problem is that I can't close all the .accordion-groups as in the original: Original codepen (line 16): animations.forEach(animation => animation.reverse()); My codepen (line 24): animationsClose.forEach(animationClose => animationClose.play()); I can't see why.
  8. Very well seen. That was the problem. Thank you.
  9. Ok. Thank you very much for your attention. In order to clarify the issue, I did a simplified codepen and a screencast from two brosers and describe more accurately the problem: Firefox render from negative to positive. These are screen recordings from Chrome and Firefox (macOS 11.4). As you can see, the recording from Chrome works perfectly, showing the smooth concatenation of iterations. On the contrary, Firefox begins each iteration, surprisingly, in negative, taking a walk in each iteration from negative to positive. https://codepen.io/aitormendez/pen/GRmNMzM
  10. Sure it helps! thank you. It solves the main question. For the other problem (it works in chrome but not in Firefox), maybe in another thread? I mean, the loop restart from scratch in firefox (macOS) each iteration repeating the same sequence with same colors, instead chaining smoothly the iterations with different colors. I'm sorry if I haven't been clear. I can make a screencast if needed.
  11. Trying to animate a radial gradient background in a loop. The background has three radial gradients: background: radial-gradient(100% 102.5% at 16% 80%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 102% at 80% 20%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 100% at 20% 80%, rgba(255, 245, 0, 0.76) 0%, rgba(255, 255, 255, 0) 100%); It works but the first iteration doesn't take the initial values set it in CSS file. It seems to animate from 0 values. Any help appreciated. Thanks. EDIT: embedded codepen doesn't work well in firefox but it works in Chrome
  12. Trying to change background color to different color for each loop iteration using onRepeat callback. It doesn't work. How can I acheve this? Thanks. let R, G, B, dur; const setVars = () => { R = Math.floor((Math.random() * 255)), G = Math.floor((Math.random() * 255)), B = Math.floor((Math.random() * 255)), dur = Math.floor((Math.random() * 4)); } const getColor = () => { setVars(); return `rgb(${R}, ${G}, ${B})`; }; setVars(); TweenMax.to(".colores", { duration: dur, backgroundColor: getColor, repeat: -1, onRepeat: getColor(), });
  13. Understood! Thank you, @Carl
  14. Yes! Thank you very much for the quick and accurate answer.