[Vue targeting dynamic created elements for animation]

Thanks @Rodrigo for pointing me in the right direction. I discovered I also need to use nextTick() with the watcher before the instances can be accessed. This is the code I landed on that is working now. Appreciate the help!

 

watch(posts, (newData) => {
  if (newData.length > 0) {
    nextTick(() => {
      gsap.to('.blog-thumb', {opacity: 1, stagger: 0.2 });
    });
  }
});

 

[Vue targeting dynamic created elements for animation]

I'm pretty new to Vue so hopefully this makes sense. I'm trying to figure out why I can animate a static element using the class name selector, but if I am creating dynamic elements they cannot be targeted by class name. Been searching all over the place and can't seem to find a good answer to this. I tried to use a ref for each element as well and that didn't work either. Thanks for the help!

<script setup>
import { onMounted } from 'vue';
import BlogThumb from './components/BlogThumb.vue';
import gsap from 'gsap';

onMounted(() => {
  // this selector works
  gsap.to('.wrapper', { duration: 0.5, opacity: 1 });
  
  // this selector does not work (console error: GSAP target .blog-thumb not found)
  gsap.to('.blog-thumb', { opacity: 1, stagger: 0.2 });
});
</script>

<template>
  <div class="wrapper">
    <div class="blog-grid">
      <BlogThumb v-for="post in posts" :key="post.id" class="blog-thumb" />
    </div>
  </div>
</template>

 

[Better framework for GSAP page transitions - Next or Nuxt?]

Thanks @Rodrigo for the thorough explanation. That was my hunch and you've confirmed it for me. I was just reading another post you had commented in (https://gsap.com/community/forums/topic/29470-gsap-page-transitions-in-nextjs/) that had me question if React was the best choice for my interest in a heavily animated website. While it's certainly possible, it seems to me that Vue is more intuitive and easier to work with from an animation perspective. Thanks for the resources appreciate the help!

 

[Better framework for GSAP page transitions - Next or Nuxt?]

Hi, I'm a long time GSAP fan dating back to the Flash days and trying to migrate to a js framework to build a SPA with nice fluid page transitions that integrate with a router. Curious of opinions on a better framework that really lets you be free with GSAP animations. I've been learning React/Next and finding that page transitions are not that intuitive and have noticed a lot of beautiful animated sites out there were done in Nuxt. Curious if I should change course and learn Vue/Nuxt to get the most out of all the animation goodness I love from GSAP? Thanks!

[React Router 6 - Screen Transitions]

@Rodrigo Thanks for providing this approach for page transitions in React I'm finding it really helpful in my learning. I was wondering is there a simple way to make it execute the enter and exit transitions at the same time? That's the part I can't figure out as it seems to have to run the exit first, then run the enter transition. Thanks!

[Loading a bonus plugin locally]

Thanks for helping me resolve the issue and understand this better! Excited to get moving with v3. 

[Loading a bonus plugin locally]

Actually the map file is fixing the problem when I view on the server, just not when I test locally.

[Loading a bonus plugin locally]

2 hours ago, ZachSaucier said:

Are you using a build tool? If so, which one? 

 

No build tool, just loading the script at the bottom of my HTML. I am able to load the gsap core without any problems. Same error happens if I try to load any of the gsap plugins.

 

2 hours ago, ZachSaucier said:

Does the error occur with absolutely nothing else in the project?

 

 

Just loading these scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/MotionPathPlugin.min.js"></script>
<script src="js/DrawSVGPlugin.min.js"></script>

 

Also tried including that map file and still throwing the error. Only thing working right now is to remove the line of code at the bottom.

[Loading a bonus plugin locally]

The updated ScrollMagic files did not solve the issue so I guess that wasn't it. Also tested without ScrollMagic entirely and same error. 

 

I went into the DrawSVGPlugin.js file and just deleted the last line that was looking for the map file (below) and now it's working.

//# sourceMappingURL=DrawSVGPlugin.min.js.map

 

Is there a danger in removing that line? Is there a way I can get access to the DrawSVGPlugin.min.js.map file? It wasn't listed with the others at the link above. Thanks!

[Loading a bonus plugin locally]

I am indeed loading ScrollMagic! Nice catch. That must be the issue. Thanks so much for pointing me in the right direction.

[Loading a bonus plugin locally]

This feels like a simple issue but I am wracking my brain to get it working. Never had an issue before until I switched to GSAP 3. I have a local copy of the DrawSVGPlugin that I am loading with this code:

 

<script src="js/DrawSVGPlugin.min.js"></script>

And then when I go to view the page I am getting a bunch of errors in the console:

 

[Error] Not allowed to load local resource: file:///Users/JLern/WORK/dev/js/DrawSVGPlugin.min.js.map
[Error] Not allowed to request resource
[Error] Cannot load file:///Users/JLern/WORK/dev/js/DrawSVGPlugin.min.js.map due to access control checks.

Do I need a file called DrawSVGPlugin.min.js.map as well? Any thoughts? Thanks for your help!

[Draw an SVG path on/off quickly to animate segment along path]

@PointC That is indeed what I was looking to do. I'm not sure I totally get why it works, but it works! Thank you

[Draw an SVG path on/off quickly to animate segment along path]

I am trying to figure out a method to create the illusion that a tiny segment of a line is traveling along the path it's on. In my codepen, I thought the right place to start was to draw the path on, then draw it off as shown first. What I imagine is there is a way to do this in rapid succession so as it is drawing each new part of the path, it is also undoing the portion behind it (desired result shown next to animation). Thanks for your help!

 

See the Pen EzBWWL by JLernDesign (@JLernDesign) on CodePen

[CustomEase visualizer combine 2 presets]

Ah that is perfect! Thanks so much @GreenSock! Exactly what I had in mind.

[CustomEase visualizer combine 2 presets]

I recently started messing with the CustomEase plugin and I love the freedom to adjust, however I'm finding it difficult to get precisely what I want which is basically 2 presets merged together. Using the visualizer on this page https://greensock.com/customease it seems you can only select one preset, then switch to Custom and adjust it from there. Just wondering is there any way I can select an easeIn say for "Power3" and an easeOut for "Back" and get it to come out as a nice mix of the two? When I adjust the points myself it just doesn't seem quite as smooth. Thanks!

[Issue with Draggable allowNativeTouchScrolling]

Thanks @GreenSock. Yeah I think the native scroll lock only on drag was what I had in mind but I had a feeling that might not be feasible. My client was taking issue with the fact that if you give it a swipe left/right, the page also moves vertically if you happen to move your finger upwards or downwards a tiny bit. Not a big deal to me, but worth investigating. Thanks!

[Issue with Draggable allowNativeTouchScrolling]

Ok so I've added a codepen that hopefully shows the situation better. 

 

The idea is that you scroll the page normally on your mobile device, but once you get to this section of  red boxes, you can swipe them back and forth without the browser scroll moving at the same time. 

 

So with allowNativeTouchScrolling set to true, as you swipe or drag those boxes the page scroll also moves up and down at the same time and I want to avoid that. 

 

If you set allowNativeTouchScrolling to false it locks the slides as you swipe them as I want, but it kills your ability to scroll the page at all past that spot. 

[Issue with Draggable allowNativeTouchScrolling]

Yeah I was thinking maybe it was an obvious fix that I just didn't know about, so a demo wasn't necessary. I'll put something together to illustrate the issue. Thanks @GreenSock

 

The example can be seen here if you scroll down to the "Our Solutions" section on a mobile device:

http://griflan.com/Clients/MobiPaid/

[Issue with Draggable allowNativeTouchScrolling]

I have a draggable element and would like to keep the browser scroll locked while dragging this element. I've set the allowNativeTouchScrolling property to false, but now once I get to that part of the page, it renders the page unscrollable and gets stuck there only allowing my draggable object to move. Is there any way around this?

See the Pen XVmXbY by JLernDesign (@JLernDesign) on CodePen

[Morph Curved Shape into Straight Rectangle]

Thanks for the tips @GreenSock and @PointC. Looking forward to experimenting more with this plugin. 

[Morph Curved Shape into Straight Rectangle]

Ah that's exactly what I was looking for @mikel. Thanks for showing me that. I'll keep that in mind moving forward. 

[Morph Curved Shape into Straight Rectangle]

I just started trying to work with the MorphSVG plugin and feeling like I must be missing something. Not working out quite as simply as expected. I have a basic S curve type shape that I want to animate into a straight edged rectangle. I'd like it to just smoothly iron out the curves until it goes straight but when I try this out it does a weird flip animation from one shape to the other. I'm exporting my SVG paths from Adobe Illustrator since it gives me a lot of control over how the path is drawn but I don't work with SVG much so this might be part of the problem. Any help to push me in the right direction to achieve this is greatly appreciated!

See the Pen JOZqej by JLernDesign (@JLernDesign) on CodePen

[Draw SVG Plugin to animate a dashed line]

Thanks for the help! I think that last idea from Diaco is perfect. I am indeed working on a solid background and that seems to be a very simple way of achieving this. 

[Draw SVG Plugin to animate a dashed line]

Jonathan, thanks for pointing me towards that tutorial on how to create a codepen (never did that before). Link is below. I put a delay on the animation so you can see how I want it to look with a dotted line, then once the circle draws on it is solid.

 

PointC, I had the same thought that if the plugin works by using the dash properties, it is most likely overwriting the dashes in my line. 

 

See the Pen QbPLre by anon (@anon) on CodePen

 

Thanks for any help you can offer!

[Draw SVG Plugin to animate a dashed line]

I am wondering if there is a way to achieve this. I have a path that is dashed, but once I run the plugin and animate it, the path becomes solid. Trying to animated the dotted circle in the attached image.