Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About andrewnelson

  • Rank

Recent Profile Visitors

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

  1. Update #3: Lottie Animation is being controlled by GSAP, with basic functionality. @OSUblake thanks again for all the information! I have been on a learning spree today and your insights have been invaluable. So I think this is mostly done; although I imagine it's not very well optimized code. Trigger Tweening, and Duration Tweening both work. I haven't put the code through any stress tests to see how easily it breaks yet.
  2. @OSUblake thank you so much for posting all the information and videos! I was searching blindly for the answers.
  3. Update #2: GSAP is wrapping Lottie, and the animation is being triggered by Scroll Magic. I have been able to get the most basic of functionality of Lottie working with ScrollMagic + GSAP. Once the ScrolLMagic scene is triggered and command to .play() the lottie scene is run. I believe the next step in this process will be figuring out how ScrollMagic and GSAP pass commands to each other, and then passing that information through and converting it to something Lottie understands to get it perform more like a GSAP timeline tween. This is very quickly leaving my scope
  4. Update #1: A Starter Pen Template: TimelineMax and ScrollMagic working together, and Lottie running an SVG animation independently. I did have to go PRO with CodePen to be able to load the JSON SVGs into the Pen; I couldn't find a way around it. (I spent a good 2 hours trying to hack together a free alternative.)
  5. Thanks for the welcome, and for the quick reply! I have to say I love the community here and have learned so much from you and your team! Re: your post I copied and pasted the nearest usable function while trying to patch this together (my ability to write code from scratch isn't that great). In this example it is the only ID of its type so I assumed it would have been good enough for testing purposes -- that being said I should have been more thoughtful about it when posting the code here. I'll make sure to fix that when posting the solution. Betwee
  6. I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered
  7. I forked and updated your CodePen with the changes I started to make earlier. It appears to be working as intended but is hard for me to tell because there are no other potentially conflicting elements on the page. https://codepen.io/anothercreativeltd/pen/ZrjLPP?editors=1010
  8. Hello @PointC thanks for the warm welcome! I appreciate you going through the CodePen and sorting out the missing scripts! I haven't used much of CodePen before so this will be incredibly helpful moving forward. As for the purpose of the code: There are multiple <ul> on the page, so calling the TimelineMax for each one. onEnter, the triggerElement will be the <ul> and then the <li> will stagger in. onLeave, each individual <li> will have an individual triggerElement and the <li> will fade out to 'opacity: 0' over a duration of 15px I ap
  9. I found part of the solution. I was trying to call multiple triggerElement's by just using a single selector. I had to nest another .each() function for each of the <li> within the original elements function. The issue now is that those <li>'s are being called from the entire site, instead of just the ones nested in the original function. ('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Si
  10. Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at a