Image Sequence Player Widget for Elementor
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- The latest custom Unlimited Elements Widget in elementslib.com helps you draw a sequence of images on a canvas element during scroll. This widget can be used to create the same effect as seen on the Apple Airpods site in Elementor and it uses the same technique as well.
Download the Image Sequence Player for Elementor Widget:
elementslib.co...
demo: ( desktop only )
Support ElementsLib by:
Like videos and Subscribe to the channel.
Share on Social Networks.
Purchase via Affiliated Links if you happen to buy a plugin listed below.
Affiliate URLs:
Unlimited Elements:
Elementor: af.elementslib...
Crocoblock: af.elementslib... - วิทยาศาสตร์และเทคโนโลยี
Congratulations for this amazing work! You just made my concept possible for free! This is a great help to artists who don't know how to code. Great work and thank you
Thank you for the kind comment. Glad it was helpful with your project.
@@elementslibrary431 Do you know how to make the images responsive? So they adjust automatically to the full size of elementor sections or the screen?
@@ruipedrooliveira4677 Possible but you will have to rewrite the js. you'll need to change the js to get the width/height of the parent container you want to base it on and update the canvas. width/canvas.height properties with those values. If you go this route, you should add a resize method that updates canvas dimensions on window resize a well
@@elementslibrary431 thanks for the answer. Unfortunately i dont know programming but thanks anyway
Yesss It's working 100%
How image sequences are triggering based on scroll :D Truly amazing
Thank you so much for this awesome tutorial, I have been looking for a long time.
Thanks for the feedback. Glad it helped you.
bro maine url sahi diya hai local pe phir bhi nahi ho raha, aapne kiya kara tha?
Thanks a lot, after 2 month of searching, finally you came with your amazing solution.
Thanks! Glad it could help you
Can't log in with Facebook on your website. Love what you are doing btw :) That image motion effect is so sick!
Thanks for the comment.
I'll be changing the plugins used for that when I have some time since it seems to happen often. Should be ok now.
Great, congratulation! Amazing, thank you very much
well, i can simply say that THANKS ALOT and keep sharing. that was very helpful.
Thanks. Happy to hear it was helpful
Amazing work 🙌
Thanks!
Hello.Thank you its amazing
Thanks!
Thanks.. Can you please make a tutorial on page transitions in elementor using barba.js and gsap
Thanks for the comment.
Currently, it's pretty hard (almost impossible really... ) to implement any PJAX based page navigation (barba, swup, and the like ) with Elementor without forgoing some of the functions that make Elementor useful. There is an old GitHub request for this, you can try voting for it, hopefully, they'll make the necessary enhancements in the future that would make it feasible.
@@elementslibrary431 okay. Quick one, do I have to install the dependencies when I use any of the ue widgets you made or are they already included in the widget
@@chillzy6752 Already included
@@elementslibrary431 I'm sorry. Me again.. The webgl distortion on hover widget does not/failed to import/install. It says 'zip import failed'. I tried it like 11 times, same thing. I installed one of the others and it installed successfully so maybe there's something wrong with it. Could you please check it out 😧. Thanks
@@chillzy6752 Hi, I just tried without changing any settings on import and it worked fine on my end. Try downloading a new copy again, maybe the file you have got corrupted on transit
This plugin looks very promising, however, I'm not able to make it work in any way, just like @Maximilian Jänicke and @Mr. Jetier commented. I have the newest version of everything, I have the right settings, but the container stays empty :/
Edit: I'm trying to use a PNG sequence
same here with a JPG sequence, even with the added JS change
@@typicalbanana6441 same.
Amazing!! I don’t see the Widget Creator or Image Sequence in the Unlimited Elements plugin though when I click your link?
Thanks.
You can find how to import widgets on the UE website
unlimited-elements.com/docs/export-import-widgets/#:~:text=To%20Import%20a%20widget%20click,wait%20for%20the%20success%20message.
Hey, thanks for the widget and the video! How do I get the folder URL? Where do I need to upload the pictures to? If I upload a picture to wordpress, I only get a url of a single image
You can upload the pictures wherever you want, it can be your server a CDN or whatever. Use the corresponding URL that points to the folder where the images are.
ex: if you upload your images to a folder (named images ) on your server under the wp-content/uploads folder then the URL would be mydomain.com/wp-content/uploads/images
@@elementslibrary431 thanks for the answer. I also asked a colleague André told me I need a ftp client with a folder structure
wow
I was not able to get your website. Are you guys still available?
This is exactly what I was seeking... But unfortunately the folder part doesn't work and my images never load.
If that was the case, it wouldn't work on the video or for the thousands of people that used it. You shouldn't have any problems if you follow the video...
'images never load' is too vague. Check your console for any errors that may help you troubleshoot your specific problem.
The installation was successful however it did not work for me. I was hoping if you can kindly upload your images to either google drive or any other cloud and give us the URL. That way we all be using the same images and settings so we should be able to narrow down the problem. Thank you in advance for your support
You can grab the images from the apple site if it's still the same but the images are irrelevant to the use case, so it doesn't really matter.
If it doesn't work then your problem most likely lies elsewhere
Hi,
The widget is not available now?
Hello. thank you for this wonderful tool and video. Unfortunately, the images in the mobile version (responsive) are always the same for me as in the desktop version. The smaller images which are in a different folder are ignored and I always see in the mobile version only the images which have the url path for the desktop.
Please help me so that I can still include it on my website.
Thanks in advance
Hi, I can't know what the problem with your setup is from here.
Start by looking at the dev console for possible errors. Check the network tab to see which files are actually loaded and go from there
hello this video is helpful but wanted to ask, that my text over the image sequence keeps on moving back and infront of the image can you help me with that
sorry not sure I understand what you are trying to do it. anything that needs to be in front of the canvas just needs to have a higher z-index
Very well done tutorial. Thank you for posting. So far I've tried Cloudinary and Uploadcare but my images are not appearing. Can you recommend an Image CDN / CDN? .................. EDIT: Ok it's working! Using Cloudinary, issue was with filenames, only works with digits. Turned off unique names in Cloudinary upload settings, and also enabled there DAM extension in their plugin. So far looking good! Cheers!
Thanks for sharing your feedback. Yeah, most CDN will generate dynamic names and that will be a problem in this case. Glad you got it sorted!
@@elementslibrary431 Hi, what determines the duration of each image as the user scrolls. Is it number of pixels moved? My sequence is running too quickly, so wondering if solution is to increase duration of video or keep same duration and increase frame rate. Currently have 570 images from a 23 sec video at 24 frames/sec. Both resulting in more images of course, which I'm guessing would provide me with a slower sequence, just wondering if one way would be better...? Thanks
(Also wanted to ask if there is a way to allow for multiple image exensions, for example, I have a sequence with mostly jpg files but towards the end I have some PNG images added in, for transparency. )
@@borisnieminen677 The height of the section + the number of images will determine that. You can also play with the Scrub value to apply a delay between the scrubbing relative to the scroll.
Not as it is but you could always edit the widget and change the code for you specific scenario
@@elementslibrary431 Ok thanks, could you elaborate on that, regarding section height and number of images affecting the relationship of scrolling and when next image appears? I'm trying all different combinations. I thought more images would mean slower sequence, I'm fiddling wit the scrubber, going all the way up to 25.....I'm also getting white flashes as I'm scrolling. I have 1700 images, so maybe the plugin is not designed for so many?. The sequence is playing back way to fast, even changing section height makes no difference. I was using around 500 images for the same sequence before, so would you suggest 250? There has to be some optimal number of images and still getting smooth playback . I really hope I can get it to work, it's a fantastic plugin but needs some more documentation to understand how to make adjustments and fine-tuning.... Thanks
(so if I understand you can mix PNG and JPG by altering the HTML code. I don't know how to code but maybe I can pick up some lines from Codegrepper , W3 or similar sites. .)
@@borisnieminen677 The section height will determine how long it will take to playback the image sequence you have. To get a smooth playback will depend on what is going on in the video itself and how many frames you divided into.
The scrub value is a delay between the scroll action and the animation: ie the animation will catch up to the scroll after that many seconds. 25 is way too much for any scenario I think.
Unfortunately, there is no magic calculation for this, it will all depend on the video you are working with, the sequence you created, what else is happening on the page, and the overall experience you are trying to create.
The video goes into details about how to use the widget, given the usage of this type of widget, there isn't much I can add to it really.
If you have to mix image formats then you will need to change the js part. But It would be easier to just use the same format, if you need transparency then convert your sequence to webp and optimize them before you upload to your CDN ( maybe your cdn has that feature already ) .
Good luck.
please how to get this Widget? cant find it in the url you mentioned
Hello dude, I have an issue trying to import the widget, unlimited elements don't work, I selected the file, press to import, can see the waiting image, but later any message and widget isn't imported. Can you help me? Thanks!
Sorry not sure what the problem is from your description, you can try posting on the UE group to see if someone who has used it before had the same issue
Nice idea, but unfortunately, it's not working. If this project was maintained, it would have a huge potential.
See comment below with working link. It works fine as expected. Make sure you are not missing a step in the instruction provided in the video.
Thanks
@@elementslibrary431 Sorry to say, but even with the modified function you provided, it doesn't work properly. It's a real pity, because so far it's really the only widget for Elementor out there.
@@maximilianjaenicke Care to expand a bit on what doesn't work properly exactly in your setup?
Did you eliminate any potential plugin conflict by activating just elementor and unlimited elements?
Is the problem in the editor or the front end?
Are you getting any errors in the console?
If the problem is in the front end, please share the link.
@@elementslibrary431 I tried it on another server, deactivated all plugins except Elementor and UE. The widget in the editor stays empty (unmodified plugin from your website). The animation in the front end isn't displayed correctly either. It starts with another frame than 1 and stops after a few frames. blog.rawimage.de/testis/ You can find the 63 images here: rawimage.de/test/
The console shows the exact same error that was mentioned here before by Ákos Solymosi: TypeError: undefined is not an object (evaluating 'elementor.$previewWrapper.context.body')
@@maximilianjaenicke You're not giving your section a big enough height to scroll through all the images. It's already mentioned in the video.
for the editor mode console error related to the elementor object, the alternative function fixes that problem.
When I upload my images folder to wp-content/uploads I'm getting a 403 Forbidden on the folder itself in the browser, but I can access the .jpg files inside by URL, would this cause the images not to load due to the plugin referencing the folder itself? I have everything set up in the video but no images are being loaded in the editor or preview with the custom code string included.
No, It's normal not to be able to access the uploads directory directly via the browser. Sorry, I can't tell what's wrong on your end with the given info...
Wow, after a long long search I was so happy when I finally found your precious little widget. But I'm afraid to say it doesn't seem to work anymore. Although all the settings are correct, the container in my layout stays empty. I uploaded a folder with 50 images (800x450) to my wp-uploads, they have four digits starting at 0001.jpg, I specified the correct dimensions and prefix padding. The url is also correct. Do you have any idea why it doesn't work? (I'm running Elementor 3.1.4 and WP 5.7.1)
Hi,
Unfortunately, I can't tell what issue you are having from the description above but I just tested it with the following and it's working as expected.
hello theme: 2.3.1
elementor: 3.2.2
elementor pro: 3.2.1
Unlimited Elements Pro: 1.4.71
Check your console for any errors. Make sure the image files are being downloaded in the network tab as well
@@SrEspinozaCruzado Thanks! See comment above
I'm also facing the same issue. Maximilian, Mr. Jetier, did you figure out how to fix it?
@@akostube Anyone has a link where you are experiencing problems?
@@elementslibrary431 the problem (for me at least) happens on the Elementor interface, so you would need admin access to see it. The widget simply doesn't render the result in editing mode (but if I save and open the page, it shows up). Here's the error message which causes it in my opinion: Uncaught TypeError: elementor.$previewWrapper.context is undefined
If you give me your email address or a social account link, I'll get in touch with you so we can figure out what's going on.
Dont work with the flexbox?
No idea, I'm not working on this for now.
Hi! Great work on this widget, extremely helpful. I'm experiencing an editor view problem that is unresolved using the alternative code string. Things work as expected on the front end. I have my console errors handy, could you provide an email address where I could send you the errors? Cheers!
Hi glad it could be helpful. Sorry, I don't have time to provide one-to-one support, please copy the console errors here and I'll see if it rings a bell, or maybe someone else who encountered the same issue can provide the solution if they see it. Thanks
This is incredible stuff. Something that puts elementor websites on overdrive. I really loved your tutorial and followed it completely, however I am not able to load the images. The website is live and I accessed the WP- Uploads folder using Filezilla FTP software and created the folders where I dumped all the images (these are in webp). I then pasted the address of the aforementioned folder to Image Sequence Folder URL but I see nothing.
I have checked the file name prefix padding and it is correct. My image extension is webp and I have entered the correct value for images uploaded.
What am I missing? Am I not uploading the files correctly? Is there a better way to upload the entire folder for a Live website?
Glad you like it.
Sorry, there is no way for me to know what is wrong on your end.
If the problem is with the path/extension, you should get some console errors for that.
Also, you can check your network tab in dev console to make sure that your images are indeed actually loaded.
@@elementslibrary431 Hi, I actually managed to link the folder and the sequence is perfectly lined up. However, I am not able to optimize the image size for mobile screens. I have at the moment disabled it on my website as it's not a deal-breaker. However, being the obstinate person that I am, I know I will revisit it and get it to work. If I am not, I know who to ask! :)
Thanks again! You are super talented. :)
V
@@vivekhsr669 Thank you for the kind comment.
Hey Viveck. Could you solve the problem for the mobile version? I have unfortunately the same error
@@confine5704 hello, not yet. Haven't been able to wrap my head around it yet.
please I need this Widget, can you help me get it ?
The link is in the video description.
elementslib.com/ue_widgets/image-sequence-player
lcan you post alittle guide how to import the jsons file Thanks
You just need to click the import button in the widgets list of Unlimited Element for Elementor in the WP Dashboard. They already have a video explaining the import/export processes here th-cam.com/video/lggVnjWl7oM/w-d-xo.html&feature=emb_logo
@@elementslibrary431 thanks !!
Is this plugin still active?
It's not a plugin, there are all individual widgets that need UE to work and the source code if included in each widget.
I'm not planning to add anything for now.
@@elementslibrary431 Thanks. I wanted to try out this method. I'm testing on a local host. And I'm experiencing the same issue of the pics not linking.
I just copied the folder to the location, on my drive manually. What am I doing wrong.
what about text ? is not there
it says in the video, you can just use elementor's motion effects for that
your description link is full of spyware and not safe