Jump to content
Search Community

Alexyn0o

Members

  • Posts

    16

  • Joined

  • Last visited

Alexyn0o's Achievements

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

Recent Badges

3

Reputation

  1. Alexyn0o
    Thanks for the fast reply @OSUblake ... I understand. Will have a second look into what you shared, because I think I tried it once but can't remember exactly why I didn't end up using it. Best guess would be that it was lagging...
  2. Alexyn0o
    http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/ -- https://greensock.com/docs/v3/Plugins/ScrollTrigger Cannot figure out how to setup scroller proxy for this... yikes! If anyone could help - I'd really appreciate it, Thank you guys
  3. Alexyn0o
    @OSUblake you are a madman and a mastermind! Thank you so much for opening my eyes and showing me a clear path to solving this! I've adjusted the code you provided and added/changed a few things. 1. used two timelines, one for mobile one for desktop. 2. used gsap.set to clearProps: true and .kill(); to destory previously created timeline every time the initDesktop/Mobile was triggered. Here is the working pen preview: https://codepen.io/designismore/pen/MWmKMdG I appreciate all the help! Hope this helps out others having similar issues/needs. Best, Alex
  4. Alexyn0o started following OSUblake
  5. Alexyn0o
    Thanks for the tip Jack. Ok, I was assuming it's not really GSAP sort of problem. Anyway I appreciate your answer. Will further investigate the code and try to fix it based on your remark. Best, Alex
  6. Alexyn0o
    This is the initial code before trying to add mediaqueries and extra selector. $('nav > #menu').each(function(i, el) { var tl = new gsap.timeline({ paused: true }); tl .from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0 }, 'Sametime') .from($(el).find('.menu-links > li > a > span'), { duration: 0.4, x: "-100%", opacity: 0, ease:'sine.inOut' }, .05, 'Sametime'); $(".icon-top").on("mouseenter", function() { tl.play(); }); $(el).on("mouseleave", function() { tl.reverse(); }); }); ultimately i'm looking for it to change to $('nav > #menu').each(function(i, el) { var tl = new gsap.timeline({ paused: true }); tl .from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0 }, 'Sametime') .from($(el).find('.menu-links > li > a > span'), { duration: 0.4, x: "-100%", opacity: 0, ease:'sine.inOut' }, .05, 'Sametime') .from($(el).find('#social'), { duration: 0.4, autoAlpha: 0 }, 'Sametime'); $(".icon-top").click( function() { tl.play(); }); $(document).on('click', function(event) { if (!$(event.target).closest('.icon-top').length) { tl.reverse(); } }); }); but only on viewport resize
  7. Alexyn0o
    Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex
  8. Alexyn0o
    Thanks man! This and a little bit of css adjusting did it. I'm embarrassed for asking help when it wasn't even a gsap problem... lol. Anyway I appreciate it!
  9. Alexyn0o
    @AslanGoi Thank you... close but not quite the desired outcome... The menu items should stay open when I move the cursor on one of them (and only on mouseleave they should close), in this case you suggested the moment the mouse leaves the menu icon the animation closes (reverses). Not what I was expecting. Any new ideas?
  10. Alexyn0o
    Greetings Greensock wizards, I want to say thank you for the code demonstration, I have tried this on my menu, and it works! Only one problem I can't seem to figure out is how can I cancel the hover animation over the overflow:hidden element and just trigger it on the menu icon only? Currently If the hidden area is hovered the animation will start and items will slide in, I need this to happen only on when hovering the icon... This may be a css problem if not a gsap one, I'm a newbie and I don't know how to achieve this the best way possible... https://codepen.io/designismore/pen/NWxPgpK Anyone want to help? Thanks
  11. Alexyn0o
    Alexyn0o changed their profile photo
  12. Alexyn0o
    Understood! I'll keep that in mind. Thank you for pointing that out. Stay awesome guys. Until next time.. Regards, Alex
  13. Alexyn0o
    Thanks for the example. I took the time also and made these examples for a better understanding. https://codepen.io/Alexyn0o/full/MROxJJ vs https://codepen.io/Alexyn0o/full/JVOzqw So, I need the first example where the statue is being fixed by background-attachment so that the scrolling makes visible(reveals) the image from bottom-to-top vs second example where the visibility of the statue is already full when you scroll. First example is fine for me. But are there bad implementations with gsap (.set for bgPosition) that makes the performance poor? Should I find a new solution into achieving this effect with translations still? ps: Just by applying any transform to the #statue element makes it's background- attachment null. Thank you all for your time and information, Hope you have a nice day Alex
  14. Alexyn0o
    Sorry I don't know how to describe this... hope you understand what I'm trying to explain... Look at the left of the screen "DaVinci statue" element being rendered from bottom-to-top on scroll because of the attachement: fixed. Using TweenMax.set backgroundPosition for moving-animation, doesn't mess the scrolling effect and gives the element the movement. 1111.mp4 But, if I use transforms to move-animate the image, then the "DaVinci statue" element would already be rendered fully because of the translations. It doesn't preserve the attachement-fixed "parallax feeling" on scroll. newz.mp4
  15. Alexyn0o
    Solution found, https://codepen.io/bsilvia/pen/xegVbe ❤️ And my try using .set https://codepen.io/Alexyn0o/pen/ROKZNE
  16. Alexyn0o
    Hi Mikel, thanks for the greet I'm happy to be here and eager to learn and share experience! Thank you for the feedback too, based on the first post I managed to edit the code into something like this: https://codepen.io/Alexyn0o/pen/MRJKLQ $(document).ready(function() { var movementStrength = 25; var height = movementStrength / $(window).height(); var width = movementStrength / $(window).width(); $("#bgmove").mousemove(function(e){ var pageX = e.pageX - ($(window).width() / 2); var pageY = e.pageY - ($(window).height() / 2); var newvalueX = width * pageX * -1 - 25; var newvalueY = height * pageY * -1 - 50; var tlmovebg = new TimelineMax() TweenMax.set("#bgmove", {backgroundPosition: "center " + +newvalueY+"px"}); }); }); It works.. (but not sure if it's the best way) It's only moving on the Y axis... haven't figured out how to add the X axis variable yet. And now I get an error in the console that says: 'too much recursion' - I understand it's an rangeError making too many calls but I don't know how to fix this... Anyone mind giving a hand? Thank you, I appreciate your time.
  17. Alexyn0o
    Hello, is there a way to integrate such an effect with GSAP? I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position. an idea/approach about what I'm thinking: .. // TweenMax.to(".top-image", 1, {backgroundPosition: newvalueX+"px "+newvalueY+"px", ease:Power4.easeInOut}) // .. ps: The pen is just a preview example for what I'm trying to achieve. Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field... Thank you, Best regards! Alex
×
×
  • Create New...