Jump to content
Search Community

misticvm

Members
  • Posts

    10
  • Joined

  • Last visited

misticvm's Achievements

  1. Ok, i get it. I´ll use it the next time. I appreciate the help. i will take a look to the code. Thank you very much.
  2. Hi, Rodrigo. The link is not working.
  3. i have a problem with revert method and gsap.context(). The animation breaks when i place it inside the context. I have an example where you can see the complete code and prove it. https://codesandbox.io/s/damp-snowflake-8ohesq?file=/src/App.js:4052-5848 Can anyboy help me with this?. Thanks Regards
  4. Perfect. Now It seems is working without problems. Thank you again!.
  5. Hi again. I have tried to adapt the code to a react application but it doesn´t work. I can´t see what is wrong https://codepen.io/misticvm/pen/MWEEzgp?editors=0010 Regards
  6. Absolutely awesome, akapowl... Thank you very much. I spent all day yesterday trying to fix that behavior (no success... i finished frustrated). Right now i´m going to try implement your code. Sorry about that but that is why i mentioned the original example of this thread. My sincere apologies. Regards.
  7. Hi, everybody. How could i add content (text or whatever) before images in that example?. Thanks.
  8. Thank you very much to both! It seems that everything works perfect now.
  9. Hi. Thanks for reply. i made this codepen. I hope it works.... https://codepen.io/misticvm/pen/YzWzvON?editors=1111
  10. Hi!. First of all. Sorry for my english. ScrollTrigger works correctly but when I resize the screen the values of the style attribute are lost and the element that I am animating returns to its initial position ScrollTrigger.saveStyles(data) ScrollTrigger.matchMedia({ // Desktop '(min-width: 900px)': function () { let tl = gsap.timeline({ scrollTrigger: { trigger: imageOverlayBorder, start: '10% 20%', end: 'bottom 75%', toggleClass: { targets: [data, imageOverlay], className: "active" }, toggleActions: 'restart none none reverse' } }) gsap.set([imageOverlayBorder, imageOverlay], { autoAlpha: 1 }) gsap.set(dataColumn, { alignItems: 'flex-end' }) tl .fromTo(imageOverlayBorder, { backgroundColor: 'rgba(0, 0, 0, .3)' }, { duration: .5, backgroundColor: 'rgba(0, 0, 0, 0)', ease: 'linear' }, 'overlay') .fromTo(imageOverlayBorder, { boxShadow: '0 0 0 0 inset #fff' }, { duration: .5, boxShadow: '0 0 0 80px inset #fff', ease: 'expo.out' }, 'overlay') .fromTo(imageOverlay, { x: '-100%' }, { x: '-35%', ease: 'expo.out', duration: 1 }, 'overlay') .fromTo(title, { color: '#fff' }, { color: '#ff570d', duration: .25 }, 'overlay') .fromTo(data, { left: '50%' }, { left: 'calc(50% - 100px)', ease: 'expo.out', duration: 1 }, 'overlay') .fromTo(meta, { autoAlpha: 0, y: 25 }, { duration: .5, autoAlpha: 1, y: 0, ease: 'expo.out', }, '-=.25') }, CSS Code: @media screen and (min-width: 900px) { left: 50%; width: 50vw !important; transform: translate(-50%, -50%); .et_pb_column { display: flex !important; flex-direction: column !important; align-items: center; } } I made a little video where this weird effect is reproduced Cheers. VID_20201007_224000.mp4
×
×
  • Create New...